animationstart有時只觸發嗎？

嘿傢伙跟隨jsfiddle：jsfiddle.net/Lvq6ee8d/12/animationstart有時只觸發嗎？

如果這是在Safari中播放，它有時有效，有時它不。您可以檢查控制檯以查看正在播放的「hallo」。然而，在Chrome中，它永遠不會被觸發。

所以兩個問題：

這是爲什麼在Safari有時工作，決不鉻其次：

是否有一個有效的解決方案來呢？

HTML：

<img src="3ds_preset_gearshape.png" class="gwd-img-r1sa gwd-gen-hlergwdanimation" data-gwd-style="" data-gwd-override-style=""/> 


<div id="play"> 
    click here to play 
</div>

CSS：

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
} 

body { 
    background-color: transparent; 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    -webkit-perspective: 1400px; 
    -moz-perspective: 1400px; 
    perspective: 1400px; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

.gwd-img-r1sa { 
    position: absolute; 
    width: 192px; 
    height: 146px; 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    left: 312px; 
    top: 604px; 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
} 

@-webkit-keyframes gwd-empty-animation { 
    0% { opacity: 0.001; } 
    100% { opacity: 0; } 
} 
@-moz-keyframes gwd-empty-animation { 
    0% { opacity: 0.001; } 
    100% { opacity: 0; } 
} 
@keyframes gwd-empty-animation { 
    0% { opacity: 0.001; } 
    100% { opacity: 0; } 
} 
@-webkit-keyframes gwd-gen-hlergwdanimation_gwd-keyframes { 
    0% { left: 312px; top: 604px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear; } 
    30% { left: 595px; top: 350px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear; } 
    50% { left: 595px; top: 350px; -webkit-transform: matrix3d(0.0510417556, 0.9986965201, 0, 0, -0.9986965201, 0.0510417556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear;} 
    100% { left: 595px; top: 350px; -webkit-transform: matrix3d(0.051, 0.9987, 0, 0, -0.9987, 0.051, 0, 0, 0, 0, 1, 0, 312, 146, 0, 1); -webkit-animation-timing-function: linear; } 
} 
@-moz-keyframes gwd-gen-hlergwdanimation_gwd-keyframes { 
    0% { left: 312px; top: 604px; -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-animation-timing-function: linear; } 
    30% { left: 595px; top: 350px; -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-animation-timing-function: linear; } 
    50% { left: 595px; top: 350px; -moz-transform: matrix3d(0.0510417556, 0.9986965201, 0, 0, -0.9986965201, 0.0510417556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-animation-timing-function: linear; } 
    100% { left: 595px; top: 350px; -moz-transform: matrix3d(0.051, 0.9987, 0, 0, -0.9987, 0.051, 0, 0, 0, 0, 1, 0, 312, 146, 0, 1); -moz-animation-timing-function: linear; } 
} 
@keyframes gwd-gen-hlergwdanimation_gwd-keyframes { 
    0% { left: 312px; top: 604px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); animation-timing-function: linear; } 
    30% { left: 595px; top: 350px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); animation-timing-function: linear; } 
    50% { left: 595px; top: 350px; transform: matrix3d(0.0510417556, 0.9986965201, 0, 0, -0.9986965201, 0.0510417556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); animation-timing-function: linear; } 
    100% { left: 595px; top: 350px; transform: matrix3d(0.051, 0.9987, 0, 0, -0.9987, 0.051, 0, 0, 0, 0, 1, 0, 312, 146, 0, 1); animation-timing-function: linear; } 
} 
body .gwd-gen-hlergwdanimation { 
    -webkit-animation: gwd-gen-hlergwdanimation_gwd-keyframes 3s linear 0s 1 normal forwards; 
    -moz-animation: gwd-gen-hlergwdanimation_gwd-keyframes 3s linear 0s 1 normal forwards; 
    animation: gwd-gen-hlergwdanimation_gwd-keyframes 3s linear 0s 1 normal forwards; 
}

的jQuery：

$(".gwd-gen-hlergwdanimation").on('webkitAnimationStart oanimationstart msAnimationStart 
animationstart', function() { 
     setTimeout(function(){ 
      $(".gwd-gen-hlergwdanimation").css({'-webkit-animation-play-state': 'paused','animation-play-state':'paused'})   
     },300); 
    console.log('hallo'); 
    })

來源

2014-10-27 Frederik Witte

請在問題中包含您的代碼。 – 2014-10-27 15:53:04

因爲在CSS中定義的動畫應該在JS有機會運行之前就已經開始了。 – 2014-10-27 15:53:12

那麼如何才能等待js被加載，直到css代碼被運行？當我使用jsfiddle時，@JamesDonnelly是否真的需要包含代碼？ – 2014-10-27 15:55:00

通過jQuery的運行附加事件時，CSS已經開始了動畫！

因此，它不能觸發animationstart事件，因爲它已經完成。

嘗試使用domReady代替onLoad（或 - 尤其是因爲你正在使用jQuery - 只需使用$(function() {...})來包裝你的代碼），因爲這將更快運行，並能之前CSS動畫開始重視該事件。

來源

2014-10-27 16:41:06

animationstart有時只觸發嗎？

回答

相關問題