Css 剪辑HTML元素而不回流

我想剪辑动画中HTML元素的内容，但不触发回流。有人知道这是否可能吗？举个例子：

这个JavaScript：

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

---

通过动画剪辑内容，但疯狂地重新播放，并在移动设备上播放一个简陋的动画。使用transform:scaleY0，我可以获得类似的结果，但这并不影响剪辑效果，因此会产生不同的视觉效果。

好的，使用

---

看到您的解决方案与剪辑：我昨天了解到，它是，但必须得到支持，所以没有问题，这是存在的。对HTML元素和SVG的支持比MDN所说的要好得多，尽管这可能还不够，但尚未测试

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

div.hide {
    height: 0;
}

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

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);
}