Question

这是一个非常奇怪的问题！如果有任何脑筋可以解释我会很感激！

我正在尝试使用以下代码加载页面时运行的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 );，那么它在两者中都有效！

WHY！？！？！？！？

Answer 1

我认为这是因为chrome的行为，我在你的js上添加了setTimeout并且它有效

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

Updated jsbin

CSS转换加上jQuery css方法在Safari和Chrome之间不一致

1 个答案: