我正在尝试将 CSS 动画与进入 DOM 的 hyperHTML 元素结合起来。 我的第一个想法是使用“onconnected”事件,但这种方法存在时间问题。这样做感觉不对——尤其是当我需要添加 setTimeOut 才能使其工作时。
const onConnected = (e)=>{
window.setTimeout(()=>{
e.target.classList.add('is-entered');
}, 0);
}
参见Code Pen例如使用“onconnected”和 setTimeout。
是否有人有将 CSS 动画/过渡与 hyperHTML 一起使用的经验?我很想看到或听到想法和最佳实践。
最佳答案
我一直在尝试 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
关于javascript - 使用 hyperHTML 制作动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46919059/