在Safari中使用javascript设置高度后，如何防止转换在页面加载时运行？

Question

我在一个液体高度的页面上有一个div，我希望通过CSS过渡来折叠/展开动画。

我使用JS设置div的默认高度，所以如果我用CSS改变高度，它可以很容易地恢复到原始状态。工作正常，问题是高度动画将在Safari中的页面加载时运行。 （在Chrome中运行正常）任何想法如何解决这个问题？

CSS：

div {
  background: red;
  transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 0s;
  overflow: hidden;
}

div.hide {
  height:10px !important;
}

JS：

$div = $('div');
$div.height($div.height()); 

$div.click(function(){
    $div.toggleClass('hide');
});

演示： https://jsfiddle.net/69taau5m/1/

Answer 1

这可能有点hacky但您也可以随时将transition应用于div点击。

这很快，但它确实有效。查看fiddle。总是可以添加一些逻辑，只在第一次点击时应用css。