首页 Javascript 正文
386

css动画重置,暂停,监听结束

  • yiqingpeng
  • 2020-12-27
  • 0
  •  
<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>

正在加载评论...