logo标签列表

CSS遮罩揭示元素

csscss-transitions
3

我需要在一个遮罩动画中显示一个元素，为此我创建了两种不同的方法。但是，我不确定如何确定哪一种方法更有效。最终目标是使动画可用于移动设备，因此效率很重要。

方法一 - 在两个不同的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) }
}

Fiddle: 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; }
}

Fiddle: http://jsfiddle.net/2d2w7j99/

这两种方法都能正常工作，但我想知道浏览器如何呈现它们。第一种方法可以动画化两个div，但只会动画化一个CSS属性（transform）。第二种方法可以动画化一个div，但会动画化两个CSS属性（width和height）。我不知道该如何确定哪种方式更快。

我认为在设备上transform被委派给了CPU，所以这是你最好的选择。虽然我也对此很感兴趣。 - somethinghere
1个回答
3

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

但是对于任何CSS而言，最终产品都将由人眼来判断，并在各种设备上进行测试，因此您需要拿起这些真实的设备，在手中进行操作。观察卡顿现象，请参考https://www.youtube.com/watch?v=n8ep4leoN9A

您还可以考虑在Chrome开发工具中打开Show paint rectangles（https://developer.chrome.com/devtools/docs/rendering-settings）以查看动画导致DOM重新绘制的次数。正确设置元素大小和清除元素可以防止连锁反应并节省浏览器的工作量。

Chrome开发工具证明了在这种情况下，变换确实更好。 - user3590712
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接