javascript - 向左溢出 :hidden doesn't work on . animate()，但向右有效？

Question

我一直在阅读，无法弄清楚这个动画有什么问题。

在加载新内容之前，我正在尝试进行转换并将页面的旧内容滑到一边。

我正在使用当前代码:

$('#clickbutton').click(function(e) {
    $('#loader').css('overflow','hidden');
    $('#loader').animate({left: "100vw"},600, function(){
        $('#loader').empty();
        $('#loader').css("left", "0vw");
        $('#loader').css('overflow','auto');
        $('#loader').load('../viewers/docentes/docentes.lista.php');
    });
  });

loader 是一个容器，body 的 child ，它的位置是相对的，body 除了默认之外没有 css 变化。

奇怪的是，如果我将 {left: "100vw"} 更改为 {left: "-100vw"}，容器动画会向右移动方向, 滚动条不出现。

为什么向左走效果不佳？

Answer 1

您不能为非定位元素的 left CSS 属性设置动画。

但是您可以使用 margin-left 属性实现您想要的效果。
负的 margin-left 会将元素推向左侧。

$('#clickbutton').click(function(e) {
    $('#loader').css('overflow','hidden');
    $('#loader').animate({"margin-left": "-100vw"},600, function(){
        $('#loader').empty();
        $('#loader').css("margin-left", "0vw");
        $('#loader').css('overflow','auto');
        //$('#loader').load('../viewers/docentes/docentes.lista.php');
        $('#loader').html("New text is here!");
    });
  });

#loader{
    border:1px solid black;
    width:400px;
    height:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="clickbutton"value="Click me">
<br>
<br>
<div id="loader">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta lorem quis gravida tempus. Fusce scelerisque vehicula ornare. Phasellus dapibus cursus augue, et accumsan lorem ultricies et. Aenean suscipit placerat nisl, congue elementum ligula porta ut. Duis lacinia lacinia augue, eu mattis lacus blandit eget. Quisque accumsan ante vitae porta interdum. Aliquam maximus ut est sed luctus. Sed sed orci in urna feugiat mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla non neque arcu. Nam cursus ultrices leo non egestas. Vivamus id nisi auctor, tempus urna eu, interdum risus. Nulla urna purus, porta et scelerisque at, pellentesque a erat.
</div>