使用hyperHTML制作动画

Question

我正在尝试将CSS-animation与进入DOM的hyperHTML元素相结合。我的第一个想法是使用'onconnected‘事件，但这种方法有一个时间问题。如果我需要添加一个setTimeOut才能让它工作，我觉得这样做是不正确的，-especially。

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

有关'onconnected‘和setTimeout的示例，请参阅Code Pen。

有没有人有和hyperHTML一起使用CSS动画/过渡的经验？我很乐意看到或听到一些想法和最佳实践。

Answer 1

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

这可能看起来没有意义，但它的美妙之处在于，如果你像这样创建一个简单的淡入动画：

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

然后像这样将它附加到您的元素：

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

一旦它进入DOM，它就会给它添加动画。

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

让我知道你的想法。

下面是带有实时示例的派生代码：https://codepen.io/alexandre-mouton-brady/pen/oGKwYQ

Answer 2

事实证明，即使是异步计时也不能解决这个问题。问题在于，浏览器将在必要时尝试避免回流，并且不一定会绘制隐式初始状态。

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

e.target.getBoundingClientRect()

/* apply new DOM state */