0

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

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

参见Code Pen，例如带有 'onconnected' 和 setTimeout。

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

4

2 回答 2

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

于 2017-10-25T20:10:08.230 回答
0

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

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

e.target.getBoundingClientRect()

/* apply new DOM state */
于 2018-12-03T11:32:10.697 回答