jquery - 如何让 css 元素除了最初之外还有过渡？

Question

如果我有如下的 css 样式:

.transition {
    transition: left linear .4s;
    -moz-transition: left linear .4s;
    -o-transition: left linear .4s;
    -webkit-transition: left linear .4s;
}

和以下 html:

<div id="mydiv">Test</div>

以及以下 jQuery:

$(function () {
    $('#mydiv').css('left', '50px');
    $('#mydiv').addClass('transition');
});

然后，当页面加载时，仍然会有从 0px 到 50px 的过渡，尽管事实上直到在 jQuery 中设置 css left 属性之后才将过渡类添加到 mydiv。

我希望能够在页面加载时设置 mydiv 的初始 css left 属性(它是根据各种参数计算的)并且不进行动画处理，但仍然设置了过渡属性初始页面加载后(页面加载后移动 mydiv 应该是动画的)。

我怎样才能做到这一点？

Answer 1

您可以在 dom 就绪时应用位置，并在页面加载时应用转换。试试 this fiddle .

$(function () {
    $('#mydiv').css('left', '50px');
});

$(window).load(function(){
    $('#mydiv').css('left', '100px');
    $('#mydiv').addClass('transition');
});

您需要区分应用两种样式。您可以使用 setTimeout 实现相同的效果。