javascript - Safari 上的 CSS 转换与其他浏览器相比起伏不定

Question

我真的很难尝试在 Safari 中创建平滑的 CSS 过渡。我试图通过使用 JavaScript onclick 事件更改它们的高度来隐藏/显示 div。在 Chrome、Firefox 和 Edge 中，由此产生的过渡非常流畅。然而，对于 Safari，它看起来很糟糕，渲染时必须在 15 fps 左右。

基本的 JSFiddle 在这里:https://jsfiddle.net/q5a9b62s/6/

我正在处理的网站在这里:http://www.allinimages.ch/

谢谢。

Answer 1

您可以尝试使用 JavaScript 将 className 添加到您的 div 中，如下所示:

    function grow() {
      var element = document.getElementById("boxid");
      if (!element.className) {
        element.className = 'tall';
      } else {
        element.className = '';
      }
    };

我添加了 className 的无效化以启用动画切换。

然后，让 CSS 处理为您完成所有转换:

    #boxid {
      background-color: red;
      width: 50px;
      height: 50px;
      position: relative;
      -webkit-transition: height 0.3s ease; 
        transition: height 0.3s ease;
    }

    #boxid.tall {
      height: 500px;
      -webkit-transition: height 0.3s ease; 
      transition: height 0.3s ease;
      transform: translate3d(100) /* this property ensures GPU processing cross-browser */
    }

Codepen 示例是 here .

有关平滑 CSS 过渡的精彩文章是 here .

跨浏览器使用 translate3d 的一些问题已记录在案 here .