如何有一个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左属性时，页面加载(它是根据各种参数计算)和不动画，但仍然有过渡属性设置后，初始页面加载(移动mydiv后，页面加载应动画)。

我怎样才能做到这一点?

Answer 1

可以在dom就绪时应用位置，在页面加载时应用过渡。试试这把小提琴。

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

您需要在应用这两种样式之间进行分离。您可以使用setTimeout实现相同的效果。