5

采用一个非常基本的 CSS3 动画规则，如下所示：

.dimension.fadeIn {
  -webkit-animation: fadeIn 0.7s;
  -webkit-animation-timing-function:ease-in-out;
  height:24px;
}

@-webkit-keyframes fadeIn {
  0% {
    height:0;
    opacity: 0;
  }
  30% {
    height:24px; /* the default row (tr) height */
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}

在除 MacBook Retina 显示屏之外的每​​台显示器上的 Chrome 中，动画都像丝绸一样流畅。当我们在 MBP 视网膜上尝试时，动画运行明显变慢并且通常感觉滞后。

我在使用Transit时遇到了同样的情况（如果您有视网膜和外部显示器，请尝试运行 Transit 的演示（或任何 CSS3 动画？），比较两个屏幕，您应该会觉得它不像您想的那么流畅喜欢）

我们尝试通过设置-webkit-transform: translateZ(0)和其他一些东西-webkit-backface-visibility: hidden来利用 GPU，但无济于事。

那么显然 Retina 显示器具有更高的像素密度，但是可以采取哪些方法来解决这个问题呢？

4

1 回答 1

0

好吧，首先，我会将第一个更改height:0;为height:0px;- 这可以防止旧浏览器上的错误。

第二次尝试添加will-change-property。我体验过，这将简化某些浏览器上的动画。

此外，我发现在动画中弄乱高度会产生很多问题。我宁愿选择类似的东西：

.dimension {
  transition: all .21s ease-in-out;
  will-change: opacity, height;
  height: 0px
}
.dimension.fadeIn {
  -webkit-animation: fadeIn 0.49s;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-delay : .21s;
  height:24px;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}

让我知道它是否有效:)

于 2015-07-07T12:04:24.547 回答