用户查看页面后开始 CSS3 过渡？答案

【问题标题】：Start CSS3 transition after user views page?用户查看页面后开始 CSS3 过渡？
【发布时间】：2016-03-28 23:29:04
【问题描述】：

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

有没有办法只在用户查看该页面后才开始动画？

有点像如果您在另一个隐藏标签中打开 youtube 视频，在您打开该标签之前它不会自动播放。如果您在新选项卡中打开一支笔，CodePen 也会这样做，直到您查看该选项卡才会启动

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

作为mentioned there，您可以检查窗口何时获得焦点，即用户单击（但未查看）它。你将如何实现它？

你选择一个 id/class/tag，随便。样式它，也有动画。聚焦该窗口后，您将 id/class 应用于元素或使用标签/id/类创建新元素。添加类后，您要么取消onfocus 函数，要么通过为此目的创建的变量进行检查。

例子：

window.onfocus=function(){
   window.onfocus=null;
   document.getElementById("toBeAnimated").className="animatable";
}

#toBeAnimated{
  font-size:25px;
}
.animatable{
  transition: background-color 250ms linear;
  background-color:black;
  transition: color 250ms linear;
  color:white;
}

&lt;div id="toBeAnimated"&gt;Focus on the snippet to animate me!&lt;/div&gt;

另一种选择：您也可以将该函数应用于onscroll 事件，即当用户开始滚动您的页面时。

【讨论】：

【解决方案2】：

您需要使用可见性 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 时，您可以使用它们动态更改您的类。

【讨论】：