如何使用除最初之外的转换的css元素？

如果我的css样式如下：

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

和以下的HTML：

 
Test 

和以下jQuery：

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

尽管事实上在jQuery中设置了css left属性之前，转换类没有添加到mydiv，所以在页面加载时仍然会从0px转换到50px。

我希望能够在页面加载时设置mydiv的初始css left属性（它是基于各种参数计算的）而不是动画，但仍然在初始页面加载后设置了过渡属性（移动mydiv之后）页面加载应该是动画的）。

我怎么能做到这一点？

Answer 1

您可以在dom ready上应用位置，并在页面加载时应用转换。 尝试这个小提琴 。

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

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