用户视图页面后启动CSS3转换？

Question

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

有没有办法只在用户拥有该页面的视图后才能启动动画？

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

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活动。当属性为 false 时，您可以使用它们动态更改您的类document.hidden。