如何通过JavaScript重新触发WebKit CSS动画？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何通过JavaScript重新触发WebKit CSS动画？相关的知识，希望对你有一定的参考价值。
所以，我有这个-webkit-animation规则：
@-webkit-keyframes shake {
0% {
left: 0;
}
25% {
left: 12px;
}
50% {
left: 0;
}
75% {
left: -12px;
}
100% {
left:0;
}
}
还有一些CSS在我的box上定义了一些动画规则：
#box{
-webkit-animation-duration: .02s;
-webkit-animation-iteration-count: 10;
-webkit-animation-timing-function: linear;
}
我可以像这样shake #box：
document.getElementById("box").style.webkitAnimationName = "shake";
但是我以后再也不能动摇了。
这只会震动一次：
someElem.onclick = function(){
document.getElementById("box").style.webkitAnimationName = "shake";
}
如何在不使用超时或多个动画的情况下通过javascript重新触发CSS动画？
我根据CSS3 transition tests github page的源代码和示例找到了答案。
基本上，CSS动画有动态完成时触发的animationEnd事件。
对于webkit浏览器，此事件名为“webkitAnimationEnd”。因此，为了在调用动画后重置动画，您需要为animationEnd事件的元素添加事件侦听器。
在普通的香草javascript：
var element = document.getElementById('box');
element.addEventListener('webkitAnimationEnd', function(){
this.style.webkitAnimationName = '';
}, false);
document.getElementById('button').onclick = function(){
element.style.webkitAnimationName = 'shake';
// you'll probably want to preventDefault here.
};
和jQuery：
var $element = $('#box').bind('webkitAnimationEnd', function(){
this.style.webkitAnimationName = '';
});
$('#button').click(function(){
$element.css('webkitAnimationName', 'shake');
// you'll probably want to preventDefault here.
});
CSS3 transition tests的源代码（如上所述）具有以下support对象，这可能有助于跨浏览器CSS转换，转换和动画。
这是支持代码（重新格式化）：
var css3AnimationSupport = (function(){
var div = document.createElement('div'),
divStyle = div.style,
// you'll probably be better off using a `switch` instead of theses ternary ops
support = {
transition:
divStyle.MozTransition === ''? {name: 'MozTransition' , end: 'transitionend'} :
// Will ms add a prefix to the transitionend event?
(divStyle.MsTransition === ''? {name: 'MsTransition' , end: 'msTransitionend'} :
(divStyle.WebkitTransition === ''? {name: 'WebkitTransition', end: 'webkitTransitionEnd'} :
(divStyle.OTransition === ''? {name: 'OTransition' , end: 'oTransitionEnd'} :
(divStyle.transition === ''? {name: 'transition' , end: 'transitionend'} :
false)))),
transform:
divStyle.MozTransform === '' ? 'MozTransform' :
(divStyle.MsTransform === '' ? 'MsTransform' :
(divStyle.WebkitTransform === '' ? 'WebkitTransform' :
(divStyle.OTransform === '' ? 'OTransform' :
(divStyle.transform === '' ? 'transform' :
false))))
//, animation: ...
};
support.transformProp = support.transform.name.replace(/([A-Z])/g, '-$1').toLowerCase();
return support;
}());
我没有添加代码来检测每个浏览器的“动画”属性。我把这个答案写成了“社区维基”并留给你。 :-)
您必须先删除动画，然后再次添加。例如：
document.getElementById("box").style.webkitAnimationName = "";
setTimeout(function ()
{
document.getElementById("box").style.webkitAnimationName = "shake";
}, 0);
要在没有setTimeout的情况下执行此操作，请在onmousedown期间删除动画，并在onclick期间添加它：
someElem.onmousedown = function()
{
document.getElementById("box").style.webkitAnimationName = "";
}
someElem.onclick = function()
{
document.getElementById("box").style.webkitAnimationName = "shake";
}
一个简单但有效的选择：
html：
<div id="box"></div>
<button id="shake-the-box">Shake it!</button>
CSS：
#box{
background: blue;
margin:30px;
height:50px;
width:50px;
position:relative;
-moz-animation:shake .2s 0 linear 1;
-webkit-animation:shake .2s 0 linear 1;
}
#box.trigger{
display:table;
}
@-webkit-keyframes shake {
0% {
left: 0;
}
25% {
left: 12px;
}
50% {
left: 0;
}
75% {
left: -12px;
}
100% {
left:0;
}
}
@-moz-keyframes shake {
0% {
left: 0;
}
25% {
left: 12px;
}
50% {
left: 0;
}
75% {
left: -12px;
}
100% {
left:0;
}
}
jQuery的：
$('#shake-the-box').click(function(){
$('#box').toggleClass('trigger');
});
但是： Ku zxsw Poi
问题： 我不知道它是否适用于Firefox，因为动画似乎不适用于那里......
根据http://jsfiddle.net/5832R/2/的建议，删除然后使用requestAnimationFrame添加动画类，以确保渲染引擎处理这两个更改。我认为这比使用setTimeout更干净，并且在前一个游戏完成之前处理重放动画。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips
});
$('#shake-the-box').click(function(){
$('#box').removeClass("trigger");
window.requestAnimationFrame(function(time) {
window.requestAnimationFrame(function(time) {
$('#box').addClass("trigger");
});
});
Clone在暂停的卡拉OK上工作得很好：在IE11上不得不强制重排（R.Krupiński的短版本）。
http://jsfiddle.net/gcmwyr14/5/
或者您可以使用以下内容：
$('#lyrics').text("Why does it hurt when I pee?");
changeLyrics('3s');
function changeLyrics(sec) {
str = 'lyrics '+ sec + ' linear 1';
$('#lyrics').css( 'animation', str);
$('#lyrics').css( 'animation-play-state', 'running' );
$('#lyrics').replaceWith($('#lyrics').clone(true));
}
首先重置该值。使用reflow在不使用超时的情况下应用更改：
function resetAnimation(elm) {
$('#'+elm).replaceWith($('#'+elm).clone(true));
}
function shake() {
var box = document.getElementById("box");
box.style.animationName = null;
box.offsetHeight; /* trigger reflow */
box.style.animationName = "shake";
}@keyframes shake {
0% { left: 0; }
25% { left: 12px; }
50% { left: 0; }
75% { left: -12px; }
100% { left: 0; }
}
#box {
position: absolute;
width: 75px; height: 75px;
background-color: black;
animation-duration: .02s;
animation-iteration-count: 10;
animation-timing-function: linear;
}
button {
position: absolute;
top: 100px;
}使用<div id="box"></div>
<button onclick="shake()">Shake</button>删除该类，然后在5ms后读取它是否有问题？
setTimeout()使用您的javascript，您还可以添加（然后删除）声明动画的CSS类。明白了吗 ？
svg.classList.remove('animate');
setTimeout(function() {
svg.classList.add('animate');
}, 10);
1）将动画名称添加到css中的#cart p.anim {
animation: demo 1s 1; // Fire once the "demo" animation which last 1s
}
#box.trigger2）在java脚本中，您无法删除类#box.trigger{
display:table;
animation:shake .2s 0 linear 1;
-moz-animation:shake .2s 0 linear 1;
-webkit-animation:shake .2s 0 linear 1;
}
。
3）使用trigger方法删除类名。
setTimeOut4）这是$(document).ready(function(){
$('#shake-the-box').click(function(){
$('#box').addClass('trigger');
setTimeout(function(){
$("#box").removeClass("trigger")},500)
});
});
。
以上是关于如何通过JavaScript重新触发WebKit CSS动画？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Safari 中的 WebKit 3D 转换后强制重新渲染
如何通过单击隐藏在 JavaScript 中的 div 来触发函数？
ServiceWorker 如何通过向所有订阅者推送来触发刷新/重新加载？