Question

我想在动画中剪辑HTML元素的内容，但不会触发回流。任何人都知道它是否可能？举个例子（fiddle）：

<div>
    This is a div<br>
    With some content<br>
    Moar moar moar<br>
    Yolo<br>
    C'est ca
</div>

使用以下CSS：

div {
    overflow-y: hidden;
    transition: height 0.4s linear;
    height: 300px;
    position: absolute;
    top: 40px;
    left: 40px;
}

div.hide {
    height: 0;
}

这个JavaScript：

setInterval(function() {
    document.querySelector('div').classList.toggle('hide');
}, 1000);

通过动画剪辑内容，但疯狂地回流，并在手机上提供了一个janky动画。我可以使用transform: scaleY(0)（fiddle）获得类似的结果，但这不会进行裁剪，从而产生不同的视觉效果。

Answer 1

好吧，设法使用clip修复它。

div {
    transition: clip 0.4s linear;
    height: 300px;
    width: calc(100vw - 40px);
    position: absolute;
    top: 40px;
    left: 40px;
    clip: rect(0, 100vw, 300px, 0);
}

div.hide {
    clip: rect(0, 100vw, 0, 0);
}

剪辑HTML元素，无需重排

1 个答案: