在使用 css 转换问题之前用 jquery 定义 css 属性答案

【问题标题】：define css properties with jquery before using css transition issue在使用 css 转换问题之前用 jquery 定义 css 属性
【发布时间】：2014-05-20 23:59:05
【问题描述】：

我发现最初设置为 auto 时使用 css 转换属性似乎存在问题。为了避免这种情况，我在添加 css 转换属性之前使用 jquery 设置了初始 css 属性。

我遇到的问题是，当我在设置初始 css 属性后立即定义过渡属性时，我得到了奇怪的行为。 示例： http://jsfiddle.net/3zUDc/10/

但是，当我将过渡属性设置延迟几毫秒时，我得到了预期的行为，但代码看起来更丑陋。 示例： http://jsfiddle.net/3zUDc/9/

有没有办法在不将 css 转换和目标参数放在 setTimeout 块中的情况下完成第二个示例中的行为？

感谢您的帮助！

【问题讨论】：

+1 很好的例子...渴望知道答案...
@Tuck 你试过 $('a:first').show().css( ?
你 .show() 工作... @AlexBall
@Tuck，完美，Wassim 已经发布了答案 ;-)
太棒了！这很好用。你能解释一下它为什么起作用吗？我不太了解它背后的理论。

标签： javascript jquery css css-transitions

【解决方案1】：

.show() 是一个答案...

$('a:first').click(function(){
    $(this).css({'width': $(this).width() / $(this).parent().width() * 100 + '%', 'height': $(this).height()});
    $('a:first').show().css({
        '-webkit-transition': 'all 3s', 
        '-moz-transition': 'all 3s', 
        width: '100%', 
        height: '100px', 
        backgroundColor: 'black'
    });
});

这里是jsfiddle demo

【讨论】：

【解决方案2】：

您可以在 CSS 声明的末尾添加 .css('left')：http://jsfiddle.net/YDt7G/

这有效（或无效）的原因是浏览器的 javascript 引擎优化了更改 DOM 的代码。所以它不会在每一行代码之后立即更新 DOM，基本上是将所有代码放入一个 DOM 更新中。

添加 .css('left') 会强制浏览器的 javascript 引擎查看 DOM 并提前更新 DOM。

【讨论】：