Question

我必须在蒙版动画中显示一个元素，并且我已经创建了两种不同的方法来完成此任务。我不确定如何确定哪一个会更有效率。最终目标是在移动设备上使用动画，因此效率很重要。

方法一 - 在两个不同的div元素上使用transform：translate（）。同时为两个div元素设置动画以实现屏蔽显示

HTML

<div class="container">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget auctor dui, ut maximus odio. Nam aliquam, ex eu posuere iaculis, erat eros tempus metus, gravida semper magna risus id elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse placerat dolor sit amet risus pretium, quis semper augue scelerisque. Integer id luctus sapien. Aenean sodales lorem id mi elementum lacinia. Nam pretium risus sed ipsum molestie mattis. Curabitur et risus et ligula malesuada gravida vitae eget ex. Suspendisse augue quam, feugiat vel est vitae, euismod pretium lacus. Etiam vitae ultrices sapien, ac viverra lorem. Donec at sodales est, sed laoreet ante.
    </div>
</div>

CSS

.container {
    width: 300px;
    height: 300px;
    transform: translate(-100%,-100%);
    -webkit-animation: reveal 5s forwards;
    overflow: hidden;
}

.content {
    width: 300px;
    height: 300px;
    transform: translate(100%,100%);
    -webkit-animation: reveal 5s forwards;
    background: red;
}


@-webkit-keyframes reveal {
    100% { transform: translate(0,0) }
}

小提琴：http://jsfiddle.net/murtw32u/

方法二 - 为父div的宽度和高度设置动画

HTML

<div class="container2">
    <div class="content2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget auctor dui, ut maximus odio. Nam aliquam, ex eu posuere iaculis, erat eros tempus metus, gravida semper magna risus id elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse placerat dolor sit amet risus pretium, quis semper augue scelerisque. Integer id luctus sapien. Aenean sodales lorem id mi elementum lacinia. Nam pretium risus sed ipsum molestie mattis. Curabitur et risus et ligula malesuada gravida vitae eget ex. Suspendisse augue quam, feugiat vel est vitae, euismod pretium lacus. Etiam vitae ultrices sapien, ac viverra lorem. Donec at sodales est, sed laoreet ante.
    </div>
</div>

CSS

.container2 {
    width: 0;
    height: 0;
    -webkit-animation: reveal2 5s forwards;
    overflow: hidden;
}

.content2 {
    width: 300px;
    height: 300px;
    background: red;
}


@-webkit-keyframes reveal2 {
    100% { width: 300px; height: 300px; }
}

小提琴：http://jsfiddle.net/2d2w7j99/

这两种方法都很明显，但我正在寻找有关浏览器如何呈现它们的任何见解。方法一，动画两个div，但只是动画一个css属性（变换）。方法二，动画一个div，但动画两个css属性（宽度，高度）。我不知道如何弄清楚哪种方式会更快。

Answer 1

最好使用利用硬件加速的CSS属性。 translate和transform是大多数浏览器中硬件加速的CSS属性。

但是对于任何CSS，最终产品将由人眼和各种设备进行评判，因此您需要掌握这些真实设备，将它们握在手中并进行游戏。判断jank https://www.youtube.com/watch?v=n8ep4leoN9A

您还可以考虑在Chrome开发工具（https://developer.chrome.com/devtools/docs/rendering-settings）中启用Show paint rectangles，以查看您的动画对DOM造成的重新绘制量。正确修复尺寸和清除元素可以阻止连锁效应并为浏览器节省大量工作。

CSS Mask Reveal Element

1 个答案: