<style>
:root{
--animation-duration: 20s;
}
.animation{height:20px;background:green;animation:fancy1 var(--animation-duration);}
@keyframes fancy1{
0%{width:0%;}
100%{width:100%;}
}
@keyframes fancy2{
0%{width:0%;}
100%{width:100%;}
}
</style>
<body>
<div class="animation"></div>
<a href="javascript:pauseAnimation();">Pause</a>
<a href="javascript:resetAnimation();">Reset</a>
</body>
<script>
/**
监听动画结束
*/
document.querySelector('.animation').addEventListener('animationend', function (){
this.innerHTML = '动画结束了！';
});
/**
暂停/继续
*/
function pauseAnimation(){
var ele = document.querySelector('.animation');
var curr = ele.style.webkitAnimationPlayState;
console.log(curr);
if (curr == 'paused') {
ele.style.webkitAnimationPlayState = 'running';
} else {
ele.style.webkitAnimationPlayState = 'paused';
}
}
/**
重置动画有三种方式
*/
function resetAnimation(){
var ele = document.querySelector('.animation');
//一、设置两个一模一样的但名称不一样的keyframes,通过切换名称实现动画重置。
var reset1 = function (){
var animationName = ele.style.animationName;
if (animationName !== 'fancy2') {
ele.style.setProperty('animation-name', 'fancy2' );
} else {
ele.style.setProperty('animation-name', 'fancy1' );
}
};
//二、通过复制元素，替换掉原有的element.
var reset2 = function (){
var newEle = ele.cloneNode(true);
if (ele.replaceChild) {
ele.parentNode.replaceChild(newEle, ele);
} else {
ele.parentNode.insertBefore(newEle, ele);ele.parentNode.removeChild(ele);
}
};
//三、通过变更class
var reset3 = function (){
var animationClassName = 'animation';
if (ele.classList.contains(animationClassName))
ele.classList.remove(animationClassName);
void ele.offsetWidth;//这一行非常关键，没有此行将不此作用。此行的目的是触发重绘。
ele.classList.add(animationClassName);
};
reset3();
}
</script>