CSS过渡加上jQuery的CSS方法在Safari和Chrome之间不一致

这真是一个奇怪的问题!如果有脑子的人能解释一下，我会很感激的!

我试图得到一个CSS过渡运行时，使用以下代码(JS Bin)页面加载

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 );，它在两者中都有效!

为什么! ? ! ? ! ? ! ?

我认为这是因为chrome的行为，我在你的js上添加了setTimeout，它工作

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

更新jsbin

相关内容

最新更新

热门标签：