防止在不同的div中播放动画（具有相同的动画效果）加载不同的屏幕尺寸

Question

我有一个使用三个 div 的登录页面。在三个中只有一个 div 设置为以任何特定的屏幕尺寸显示。每个 div 使用媒体查询以特定的屏幕尺寸加载。

Div1 ---> 最大宽度为 800 像素

Div2 ---> 宽度在 801px 到 1400px 之间

Div3 ---> 1400px 宽度以上

每次页面加载时，我的 div 中的背景图像都会使用 CSS 过滤器从黑白图像变为彩色图像

当我调整窗口大小时出现问题。例如，将我的窗口调整为更小的屏幕尺寸/窗口尺寸； Div2 设置为 display:none 并且 Div1 现在可见。结果自从加载了 div 之后，它再次加载了黑白到彩色的 CSS 滤镜效果。但是，这种效果应该只在页面加载期间播放一次，而不是在调整浏览器大小或我的 ipad 旋转（屏幕宽度增加）时播放。

谁能建议我解决这个问题。我正在考虑在某个指定时间（从页面加载开始播放背景动画所花费的时间）之后阻止任何动画播放。谁能指导我如何做到这一点或帮助提供更好的解决方案

Answer 1

一种方法是在父元素上添加一个 CSS 类 .animate，并在 CSS 过滤器过渡结束后删除该类。可以通过transitionend 事件来完成。更多信息在这里：https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/ 然后，在您的 CSS 中，您可以仅在 .animate .div1 {...} 选择器上创建 CSS 过滤器效果。