除了最初，如何有一个带有过渡的css元素？答案

【问题标题】：How to have a css element with transitions except initially?除了最初，如何有一个带有过渡的css元素？
【发布时间】：2011-10-11 00:20:41
【问题描述】：

如果我的 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 应该是动画的）。

我怎样才能做到这一点？

【问题讨论】：

标签： jquery css-transitions

【解决方案1】：

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

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

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

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

【讨论】：