Safari 和 Chrome 之间的 CSS 过渡加 jQuery css 方法不一致答案

【问题标题】：CSS transition plus jQuery css method inconsistent between Safari and ChromeSafari 和 Chrome 之间的 CSS 过渡加 jQuery css 方法不一致
【发布时间】：2014-08-18 00:05:52
【问题描述】：

这是一个非常奇怪的问题！如果有大神能解释一下，我将不胜感激！

我正在尝试使用以下代码 (JS Bin) 在页面加载时运行 CSS 过渡

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <div id="my-message">My message</div>
</body>
</html>

CSS

#my-message {
    overflow-y: hidden;
    background: yellow;
}

.my-transition {
    transition: height 4s;
}

JavaScript

$( document ).ready( function() {

    var $myMessage = $( '#my-message' );

    var height = $myMessage.height();

    $myMessage.height( 0 );

    $myMessage.addClass( 'my-transition' );

    $myMessage.css( 'height', height );

} );

过渡在 Safari 中按预期工作，但在 Chrome 中它只是立即显示（无过渡）。

奇怪的是，如果你将 JavaScript 中的最后一个命令从 $myMessage.css( 'height', height ); 更改为 $myMessage.heigh( height );，它在这两个命令中都可以使用！

为什么！？！？！？！？

【问题讨论】：

标签： jquery google-chrome css-transitions

【解决方案1】：

我认为是因为 chrome 的行为，我在你的 js 上添加了 setTimeout 并且它起作用了

setTimeout(function(){  $myMessage.css( 'height', height );},1);

Updated jsbin

【讨论】：