Question

我正在尝试将CSS动画与进入DOM的hyperHTML元素结合起来。我的第一个想法是使用＆＃39; onconnected＆＃39;事件，但这种方法存在时间问题。并且以这种方式做到这一点并不是正确的 - 特别是如果我需要添加setTimeOut以使其工作的话。

const onConnected = (e)=>{ 
    window.setTimeout(()=>{ 
        e.target.classList.add('is-entered');
    }, 0);
}

请参阅Code Pen，例如使用＆＃39; onconnected＆＃39;和setTimeout。

是否有人在使用hyperHTML处理CSS动画/过渡方面有经验？我很乐意看到或听到想法和最佳实践。

Answer 1

我一直在尝试使用hyperHTML，我真的很喜欢它。这个库的乐趣在于它纯粹而且简单地是真正的DOM，这意味着你的代码和DOM之间没有层。

这似乎没有意义，但美丽的是，如果你创建一个简单的淡入式动画：

@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}

然后将其附加到您的元素：

.comment {
  animation: fade-in 1s;
}

它会在进入DOM后立即为其设置动画。

对于某些用例来说，这可能过于简单，但对于您所询问的场景，它将是完美的IMO。

让我知道你的想法。

Answer 2

事实证明，即使是异步滴答声，对于此问题也不可靠。问题在于，浏览器将尝试在必要时避免重排，并且不一定会绘制隐式的初始状态。

对于所有DOM库，这都是一个棘手的问题，因为它需要反复猜测急切的浏览器优化，因此我通常在应用程序代码中进行处理。可靠的解决方法是通过在两个状态之间插入实时计算的DOM属性来强制浏览器重排-这表明浏览器需要确定元素定位的准确当前状态，进而需要完全计算当前样式：

e.target.getBoundingClientRect()

/* apply new DOM state */