javascript - 用户查看页面后启动 CSS3 转换？

Question

我的主页顶部有一个 CSS3 动画，它会在页面加载后立即启动。问题是，如果用户在新选项卡中打开该页面但没有立即查看它，即使他们没有查看该页面，动画也会播放。

有没有办法让动画仅在用户查看该页面后才开始播放？

有点像如果您在另一个隐藏的选项卡中打开 YouTube 视频，它不会自动播放，直到您打开该选项卡。如果您在新选项卡中打开笔，CodePen 也会执行相同的操作，直到您查看该选项卡，它才会启动

Answer 1

您需要使用可见性 api:https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

特别是，您需要 document.hidden 属性和 visibilitychange 事件。当 document.hidden 属性为 false 时，您可以使用它们动态更改您的类。