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跨浏览器使用docker diff ...的一些问题已记录在案here。

与其他浏览器相比，Safari上的CSS转换不稳定

1 个答案: