Question

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

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

有点像如果你在另一个隐藏标签中打开YouTube视频，它将不会自动播放，直到你打开该标签。如果您在新标签中打开笔，它也会执行相同操作，直到您查看该标签

Answer 1

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

特别是，您需要{% static 'css/tem.css' %}属性和document.hidden事件。当visibilitychange属性为false时，您可以使用它们动态更改类。

Answer 2

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

你选择一个id / class / tag，无论如何。风格，也有动画。重点关注该窗口后，将id / class应用于元素或使用标记/ id / class创建新元素。添加类后，您可以使builders.html.StandaloneHTMLBuilder.prepare_writing()函数无效，或通过为此目的创建的变量进行检查。

示例：

＆＃13;

onfocus

＆＃13;

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

＆＃13;

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

＆＃13;

另一种选择：您也可以将该功能应用于<div id="toBeAnimated">Focus on the snippet to animate me!</div>事件，即当用户开始滚动您的页面时。

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

2 个答案: