防止在不同屏幕大小的不同屏幕上播放动画（具有相同的动画效果）

我有一个使用三个屏幕的着陆页。三个中只有一个div被设置为以任何特定的屏幕尺寸显示。每个div使用媒体查询以特定的屏幕大小加载。防止在不同屏幕大小的不同屏幕上播放动画（具有相同的动画效果）

Div1构成--->高达800像素宽度

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

DIV3 --->以上1400px宽度

每次页面加载的背景图像在我的div从黑白图像变为使用CSS滤镜的彩色图像

当我调整窗口大小时出现问题。例如，将窗口大小调整为较小的屏幕尺寸/窗口大小; Div2被设置为显示：无，Div1现在可见。因为div加载后，它会再次加载黑色和白色以着色CSS滤镜效果。然而，这种效果只能在页面加载期间播放一次，而不是在浏览器被调整大小或者我的iPad被旋转时（屏幕宽度增加）。

任何人都可以为我推荐一个解决方案。我正在考虑在特定的时间（从页面加载到播放背景动画的时间）之后阻止任何动画播放。任何人都可以指导我如何做到这一点或帮助更好的解决方案

来源

2016-11-20 Shaminder Ossan

您是否尝试过使用CSS媒体查询？ – NewToJS

欢迎来到SO。如果你显示你的代码，帮助你更容易。 – henrikstroem

也许使用媒体查询会有一些用处？我相信你可以玩这个也许找到一种方法来清理它，但不是一个例子http://codepen.io/anon/pen/vygvjW – NewToJS

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

来源

2016-11-20 11:18:33 Giedrius

谢谢你。我已经有了一个名为“animame”的父容器，并且我已经使用一个脚本来加载页面加载时的动画。但是我的核心力量就是CSS。你能告诉我如何在下面的脚本中添加它（用于在页面启动时加载）。有一种方法可以在4秒后将类添加回来，因为所有的动画结束了。我已经用于aninamtion集CSS为无类aniname –

防止在不同屏幕大小的不同屏幕上播放动画（具有相同的动画效果）

回答

相关问题