Javascript 带有超HTML的动画

我试图将CSS动画与进入DOM的超HTML元素结合起来。 我的第一个想法是使用“onconnected”事件，但这种方法存在时间问题。而且这样做感觉不对——特别是当我需要添加setTimeOut使其工作时

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

请参阅“OnConnectiond”和setTimeout的示例

---

有没有人有与hyperHTML一起使用CSS动画/转换的经验？我很想看到或听到想法和最佳实践

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

这似乎没有什么意义，但其美妙之处在于，如果您创建一个简单的淡入动画，如：

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

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

然后将其附加到元素上，如下所示：

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

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

它将在它进入DOM后立即设置动画

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

让我知道你的想法

---

这是一个带有实例的分叉代码笔：

结果表明，对于这个问题，甚至异步勾号都不可靠。问题在于，浏览器会在必要时尽量避免回流，而不一定会绘制隐式初始状态

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

e.target.getBoundingClientRect()

/* apply new DOM state */

---

你好@alexandre mouton bradyHi@alexandre mouton brady。这无疑是一种为进入DOM的元素设置动画的方法。但我想我正在寻找一种类似于模式的东西，它可以适合更高级的动画，比如改变列表。我对css动画的经验是，如果它们依赖于其他动画等等，它们很快就会变得非常复杂，难以管理。但也许解决办法是将它与GASP或类似的东西结合起来-谢谢你的例子！