jquery - Safari 中的 CSS 动画滞后

Question

我有一个用 HTML 和 CSS 构建的画廊。图库中的每个元素都应该是可点击的，并且 on:hover 应该显示该特定元素包含的内容的简短描述。整个效果基于 Apple 在其上的 Newsroom site。 .

我的代码在 Firefox 和 Chrome 上都能完美运行，但我在 Safari (v12) 上一直有延迟。

我有以下 Jquery:

$(document).ready(function(){
      $(".item").hover(function(){
        $(this).find(".description_container").css("height", "auto").css("margin", "0 20px 20px 20px");
        $(this).find(".description").css("opacity", "1");
        $(this).find("img").css("opacity", "0.5");
        $(this).find("video").css("opacity", "0.5");
        $(this).css("box-shadow","0 0 30px 0 rgba(0,0,0,0.15)").css("cursor","pointer");
      }, function(){
        $(this).css("box-shadow","0 0 0 0 rgba(0,0,0,0.0)").css("cursor","default");
        $(this).find("img").css("opacity", "1");
        $(this).find("video").css("opacity", "1");
        $(this).find(".description_container").css("height", "0px").css("margin", "0 20px");
        $(this).find(".description").css("opacity", "0");
      });
    });

HTML:

<div class="gallery">
        <div class="item">
          <img src="placeholder.png">
          <!-- The whole item is a link -->
          <a href="https://example.com/" style="position: absolute; top: 0; left: 0; width:100%; height:100%;">
          <div class="content">
          <p class="tags"><span class="gato">#</span>
          <span class="tag">Sample tag 1</span>
          <span class="tag">Sample tag 2</span>
          <!-- Title -->
          <h2>This is an Item's Title!</h2>
          <!-- Date -->
          <p class="date">December 2018</p>
          <!-- Description -->
          <div class="description_container">
          <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div></div></a></div>
</div>

和 CSS:

    * {
      -webkit-transition: all 0.2s ease;
      -moz-transition:    all 0.2s ease;
      -ms-transition:     all 0.2s ease;
      -o-transition:      all 0.2s ease;
    }

    .gallery {
      margin: 60px auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }

    .item {
      width: 100%;
      border-radius: 4px;
      position: relative;
      padding-bottom: 105px;
      border-bottom: solid #D9E7F6 2px;
      overflow: hidden;
      box-shadow: 0 0 0 0 rgba(0,0,0,0.0);
      background-color: black;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
    }

    .item img {
      opacity: 1;
      display: block;
      width: 100%;
      height: auto;
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
    }

    .item .content {
      position: absolute;
      width: 100%;
      bottom: 0;
      background-color: white;
      text-align: left;
    }

    .item .tags {
      margin: 20px 0 0 20px;
    }

    .item .tags .gato {
      font-size: 12px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 500;
      color: #9FB8D8;
      margin-right: 5px;
    }

    .item .tags .tag {
      font-size: 12px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 500;
      color: #0071FF;
      margin-right: 5px;
    }

    .item h2 {
      font-size: 20px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 500;
      color: black;
      margin: 5px 20px;
    }

    .item .date {
      font-size: 12px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 500;
      color: #9B9B9B;
      margin: 0 20px 20px 20px;
    }

    .item .description {
      position: relative;
      opacity: 0;
      font-size: 12px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 500;
      color: #9B9B9B;
      margin: 0;
    }

    .item .description_container {
      position: relative;
      height: 0px;
      margin: 0 20px;
    }

• [视频] 在 Chrome 中查看.
• [视频] 在 Safari 中查看.

Answer 1

实际上，如果你想获得 super 平滑的效果，你必须使用transform (rotate, scale, translate, matrix, skew...)，仅限不透明度属性。您应该尽可能避免像以前那样设置高度和边距的动画。因为那些属性 cause repaints and/or reflow on the page .这是另一个很好的链接，提供了有关 which properties you should use 的更多详细信息以获得 60fps 的动画。

We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps.

此外，当 CSS 可以胜任这项工作时，您还应该避免使用 JS 或 jQuery 来设置动画或选择元素。在这里，您的效果只能通过使用 :hover 伪类来实现。实际上，Apple(在您提供的页面上)仅使用 CSS 创建动画 -> :hover。 jQuery，可能会导致在 DOM 中进行长时间的深度分析，并将一些垃圾插入到您想要的 60fps 动画中。在您的代码中，您添加了很多 js，以便以非常非常快的方式复制 css 可以单独实现的行为。常见的做法是:如果父元素悬停，则更新覆盖其子元素的所有类在您的 CSS 样式表(不是 Js)。

这是一个简单的例子:

.parent-el {
  position: relative;
  cursor: pointer;
}

.child-el-1 {
  transform: translate3D(0,0,0);
  transition: transform .4s ease;
}
.child-el-2 {
  transform:rotate(0);
  transition: transform .4s ease;
}

.parent-el:hover .child-el-1 {
  transform: translate3D(100px,0,0);
}
.parent-el:hover .child-el-2 {
  transform: rotate(45deg);
}

在您的情况下，这可能是:

.item { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); ...} // A better approach way to achieve it, is to use :after/:before pseudo element that contains box-shadow that you will animate with opacity property (0-1).
.item:hover { box-shadow: 0 0 30px 0 rgba(0,0,0,0.15); ... }

.container { opacity: 0; ...}
.item:hover .container { opacity: 1; ...}

.item img, .item video{ opacity: 1; ...}
.item:hover img, .item:hover video{ opacity: .5; ...}

...

并且不要忘记为每个设置 transition 属性(此外，* 选择器在您的代码中将来处理起来可能会很棘手)。

最后，您可以尝试添加will-change property这有助于提高动画性能(需要适度使用)。

关于 web 上的 fps 性能有很多要说/写的东西，但我相信这些简短的建议将帮助您解决 web 动画性能问题。