javascript - 使用 hyperHTML 制作动画

Question

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

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

参见Code Pen例如使用“onconnected”和 setTimeout。

是否有人有将 CSS 动画/过渡与 hyperHTML 一起使用的经验？我很想看到或听到想法和最佳实践。

Answer 1

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

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

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

然后将其附加到您的元素上，如下所示:

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

一旦进入 DOM，它就会为其设置动画。

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

让我知道你的想法。

这是带有实例的 fork 代码笔:https://codepen.io/alexandre-mouton-brady/pen/oGKwYQ