多次使用javascript触发CSS3关键帧

我正在用javascript触发CSS3关键帧，但它在第一次调用之后工作，对该函数的任何调用都不会对我的div设置动画

这里是Javascript代码

function animateShare (imgSrc){            
    var share = document.getElementById("shareTools");
    share.style.animation = "testAnimate 1s ease-in-out 0s"
    //shareTools.style.animationPlayState = "running";
}

问题示例（单击红色框预览）

var-box=document.getElementById（“box”）；
函数animateBox（）{
box.style.animation=“box 1s ease in out 0s”；
}

#框{
背景：红色；
宽度：100px；
高度：100px；
}
@关键帧框{
50%{宽度：300px；}
}

---

想想你的代码——在第一次调用之后，它什么也不做，因为它已经改变了该元素的动画属性

根据：

---

您可以使用众所周知的hack:销毁并创建元素来重置动画

var-box=document.getElementById（“box”）；
函数animateBox（）{
//摧毁和创造黑客
文件.正文.删除child（框）；
文件.正文.附件（框）；
box.style.animation=“box 1s ease in out 0s”；
}

#框{
背景：红色；
宽度：100px；
高度：100px；
}
@关键帧框{
50%{宽度：300px；}
}

---

将此代码添加到正在播放动画的元素之后的主体部分-

<script>
document.getElementById('shareTools').addEventListener("animationend", function () {

        this.removeAttribute("style");
    })

</script>

document.getElementById（'shareTools'）.addEventListener（“animationend”，函数（）{
此。删除属性（“样式”）；
})

---

或者，如果不想删除样式属性，因为您有动画以外的其他css，所以创建一个类并动态添加类，然后按照上述代码将其删除。

在动画完成后，只需从元素的样式中删除

动画

属性即可重置动画-无需删除元素。在我的示例中，我用JS设置了持续时间，但您也可以简单地添加

animationend

hook以使其更简单

var持续时间=1000；
document.getElementById（'box'）。addEventListener（'click'，函数onClick（ev）{
var el=这个；
el.style.animation='box'+（持续时间/1000+'s'）+'ease in out'；
setTimeout（函数（）{
el.style.animation=''
}，持续时间）；
});
#框{
背景：红色；
宽度：100px；
高度：100px；
}
@关键帧框{
50% {
宽度：300px；
}
}
你能做一把小提琴来检查一下吗
<script>
document.getElementById('shareTools').addEventListener("animationend", function () {

        this.removeAttribute("style");
    })

</script>