css animation-play-state暂停在ios中不工作

问题描述

  body.pause * {
 animation-play-state：paused！important; 
 -webkit-animation-play-state：paused！important; 
} 
  

我想暂停所有css动画，当有一个类.pause身体。它在桌面工作正常，但这不工作在ipad / iphone。我在ios8上测试它。

我注意到的另一件事是，我使用步骤动画和上述暂停代码暂停步骤动画，但完全忽略变换。 / p>

注意到这个问题只发生在ios Safari。

解决方案

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

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


2. 创建调用javascript函数的正常事件， webkit-animation：none！important;到< div> （您可以添加/删除css类）

CSS样式

  .no-animation {
 -webkit-animation：none！important; 
} 
  

Javascript

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

1. 要恢复，请删除CSS类

Javascript

  div.className = div .className.replace（no-animation，''）; 
  

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

body.pause * {
animation-play-state:paused !important;
-webkit-animation-play-state:paused !important;
}

I want to pause all css animations when there is a class ".pause" on body. It works fine in desktop but this doesn't work in ipad/iphone. I am testing it on ios8.

Another thing I noticed is, I am using steps animation and the above "pause" code pause the steps animation but completely ignore transform.

And noticed that this problem only occurred in ios Safari. Even Chrome in ios is fine.

解决方案

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. Don't use Pause event in GWD (Google Web Designer)
2. Create normal event that calls a javascript function, set "-webkit-animation: none !important;" to the <div> (you can add/remove css class)

CSS Style

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

Javascript

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

1. To resume, remove CSS class

Javascript

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

1. Please note that when remove/pause animation, it will go back to frame 0 (00:00 s), so you may need to calculate the current opacity/position for the div

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

这篇关于css animation-play-state暂停在ios中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！