如何防止在 Safari 中使用 javascript 设置高度后在页面加载时运行过渡

Question

>我在具有液体高度的页面上有一个div，我想用CSS过渡进行动画处理以折叠/展开。

我使用 JS 设置了div 的默认高度，因此如果我使用 CSS 更改高度，它可以轻松地恢复到原始状态。工作正常，问题是高度动画将在 Safari 中的页面加载时运行。（在铬中工作正常）知道如何解决这个问题吗？

.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

它可能有点笨拙，但您也可以始终在单击时将transition应用于您的div。

这样做很快，但它有效。看看小提琴。总是可以添加一些逻辑以仅在第一次单击时应用 css。