通常淡入/淡出动画似乎比它们应该更复杂,因为您还必须安排时间显示:无人在正确的时间切换。
切换指针事件是否有不利之处:无,而不是显示:无?
假设元素是绝对定位的,那么我们不必担心它会占用空间。
示例代码显示使用指针事件而不是显示的淡入淡出动画:无。
function animate(e) {
document.body.querySelector('p').className = 'animate'
}
p {
opacity: 0;
pointer-events: none;
transition: opacity 500ms;
}
p.animate {
opacity: 1;
pointer-events: unset;
}
<button onclick='window.animate()'>Clicky!</button>
<p>Hi there</p>