javascript - 在 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。