4

我已经阅读了有关 using translate 如何具有更好的性能，但似乎它们的行为略有不同： usingleft:100%将动画对象一直移动到屏幕的末尾，而translate(100%)仅将动画对象移动到其长度。也就是说，它移动 100% 的屏幕而不是 100% 的对象。

可以解释为什么会这样，以及在使用时可以做些什么来重现相同的行为translate？

你可以在这里看到一个演示：http: //jsfiddle.net/32VJV/1/

.slide_1 {
    top: 0px;
    left:0%;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}
.slide_1 {
    -webkit-animation: slide 3s infinite;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode:forwards;
    -webkit-transform-origin: 0% 0%;
}
.slide_2 {
    top: 25px;
    left:0%;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}
.slide_2 {
    -webkit-animation: slide2 3s infinite;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode:forwards;
    -webkit-transform-origin: 0% 0%;
}
@-webkit-keyframes slide {
    0% {
        -webkit-transform: translate(0%);
    }
    50% {
        -webkit-transform: translate(100%);
    }
    100% {
        -webkit-transform: translate(0%);
    }
}
@-webkit-keyframes slide2 {
    0% {
        left 0%;
    }
    50% {
        left:100%;
    }
    100% {
        left:0%;
    }
}

<div style="font-size:18px;">
    <div class=""> <span class="slide_1" id="dimensions">ABC</span>  <span class="slide_2" id="dimensions">ABC</span>

    </div>
</div>
4

1 回答 1

6

两者之间的区别在于，为 left 之类的属性设置动画会使元素保持在文档流中，而translate不会。

有关为什么使用其中一个或另一个的更多信息，Paul Irish 有一篇出色的文章（带有指向更多信息的链接）：Why Moving Elements With Translate() is Better than Pos:abs Top/left

jankfree.org上还有很多关于浏览器性能的重要信息

翻译动画的解决方案：使元素与窗口一样宽：

例子

slide_1 {
    top: 0px;
    left:0%;
    right: 0;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}

一个有趣的练习：打开你的开发工具，看看当你一次激活一个动画时会发生什么。

在 Chrome 中：

  • 除了周期性 GC 之外，翻译动画基本上没有发生任何事情
  • 您将反复看到的左侧动画：
    • 重新计算样式
    • 布局
    • 疼痛设置
    • 画
    • 复合层

在这种情况下，它的开销非常小，但这可以根据在屏幕上移动的内容而迅速改变。

于 2013-09-05T20:57:01.810 回答