Question

我有一个使用HTML和CSS构建的画廊。画廊中的每个物品都应该是可单击的，并且on：hover应该显示该特定物品包含的内容的简短描述。整个效果取决于苹果在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

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

我们将直接追逐。现代浏览器可以非常便宜地对四件事进行动画处理：位置，比例，旋转和不透明度。如果您进行其他动画处理，后果自负，并且可能不会达到流畅的60fps帧率。

此外，当CSS可以正确完成工作时，您也应避免使用JS或jQuery设置动画或选择元素。在这里，只有使用skew伪类才能达到效果。实际上，Apple（在您提供的页面上）仅使用CSS-> :hover创建其动画。 jQuery，可能会导致对DOM进行深度分析，并在所需的60fps动画中插入一些垃圾。在您的代码中，您添加了许多js，以复制CSS可以非常快速地单独实现的行为。常见的做法是：如果将父元素悬停了，请在CSS样式表（而非Js）中更新覆盖其子元素的所有类（不是Js）。

这是一个简单的例子：

:hover

在您的情况下，可能是：

.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选择器可能很难处理您的代码）。

最后，您可以尝试添加* property，这有助于提高动画效果（需要适度使用）。

关于网络上的fps性能，有很多要说/写的东西，但是我敢肯定，这些简短的建议会帮助您完成网络动画的性能追求。

Answer 2

我认为这可能是因为您大量使用find（）

此方法沿DOM元素的后代向下遍历，所有到最后一个后代的方式

使用children（）直接访问chelidren或使用querySelector（）或任何其他方法。

Safari中的CSS动画滞后

2 个答案: