页面滚动时元素进入视口时如何触发CSS动画？

页面滚动期间在视口中可见的元素的动画

在网页上使用 CSS 动画时，经常会遇到所有动画同时播放的情况，从而遮盖了那些动画底部。为了解决这个问题，我们将探索使用 IntersectionObserver API 的解决方案。

IntersectionObserver API

IntersectionObserver API 允许开发人员监控元素与它的父容器或视口。当某个元素进入视图时，它会触发一个可用于启动操作的事件。

示例实现

下面是一个在以下情况下触发 CSS 类切换的示例：元素在视口中变得可见：

<br>const inViewport =（条目，观察者）=> {<br>条目.forEach(entry =>{<pre class="brush:php;toolbar:false">entry.target.classList.toggle("is-inViewport", entry.isIntersecting);

});
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //参见：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

//将观察者附加到每个[data-inviewport]元素：
文档.querySelectorAll('[data-inviewport]').forEach(el => {
Obs.observe(el, obsOptions);
});

在上面的例子中，所有具有 [data-inviewport] 属性的元素都会被监控。当元素处于视图中时，会添加 is-inViewport 类，并触发下面 CSS 中定义的动画。

<br>[data-inviewport="scale-in"] { <br> 转换：2s;<br> 变换： scale(0.1);<br>}<br>[data-inviewport="scale-in"].is-inViewport { <br> 变换：scale(1);<br>}<p>[数据-inviewport="fade-rotate"] { <br> 过渡：2s;<br> 不透明度： 0;<br>}<br>[data-inviewport="fade-rotate"].is-inViewport { <br> 变换：旋转(180deg);<br> 不透明度：1;<br>}<br>&lt ;/pre></p><p>此解决方案确保动画仅在滚动过程中元素可见时播放，从而提高用户体验体验并创建更具视觉吸引力的网页。</p>

以上是页面滚动时元素进入视口时如何触发CSS动画？的详细内容。更多信息请关注PHP中文网其他相关文章！