-webkit-animation-play-state在iOS 8.1上不起作用（可能也更低） [英] -webkit-animation-play-state not working on iOS 8.1 (probably lower too)

问题描述

我有一个在页面加载时运行的动画，并且使用javascript我添加了一个包含

I have an animation running on page load and with javascript I add a class containing the

-webkit-animation-play-state:paused;

在OSX Safari和所有其他浏览器（甚至是PC）上也可以正常工作，但只能在iOS上使用移动设备

Working fine on OSX safari and all other browsers (even PC) too but on mobile, only on iOS that the animation doesn't seem to paused when called.

这里是关于动画状态如何运行和暂停的小提琴。

Here's a fiddle on how the animation state is running and paused.

http://jsfiddle.net/uc9c5/2 /

在iOS上尝试一下，您会发现它完全被忽略了。

Try it on iOS, you'll see that it's totally ignored.

推荐答案

使用 -webkit-animation的iOS 8-9 Safari的解决方法：无！important; 而不是 -webkit-animation-play-state：paused ;
此方法适用于GWD，但也可以应用

Workaround approach for iOS 8-9 Safari that use -webkit-animation: none !important; instead of -webkit-animation-play-state:paused; This approach is for GWD, but can apply otherwise

1. 不要在GWD中使用暂停事件（ Google Web Designer）


2. 创建调用javascript函数的普通事件，并将其设置为 -webkit-animation：none！important;到< div> （您可以添加/删除CSS类）

CSS样式

.no-animation {
  -webkit-animation: none !important;
}

Javascript

Javascript

div.className = div.className + " no-animation";

1. 要恢复，请删除CSS类

Javascript

Javascript

div.className = div.className.replace("no-animation", '');

1. 请注意，删除/暂停动画时，它将返回到第0帧（00:00 s），因此您可能需要计算div的当前不透明度/位置

http://jsfiddle.net/duchuy/pczsufL9/

这篇关于-webkit-animation-play-state在iOS 8.1上不起作用（可能也更低）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！