原生JS实现CSS动画效果

最新推荐文章于 2022-10-11 22:16:17 发布

weixin_34129696

最新推荐文章于 2022-10-11 22:16:17 发布

阅读量412

点赞数 1

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/1778998/blog/881375

版权

2019独角兽企业重金招聘Python工程师标准>>>

shake()将元素从一边到另一边快速移动或震动，fadeOut()通过指定的时间（默认为500毫秒）降低元素的透明度，使得元素淡出和消失。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>js实现动画</title>
	<style type="text/css">
	button{
		margin-left: 50px;
	}
	</style>
</head>
<body>
<button onclick="shake(this,fadeOut);">shake and fade</button>
<script type="text/javascript">
	function shake(e,oncompleteFun,distance,time){
		if(typeof e ==='string')
			e=document.getElementById(e);
		if(!distance) distance=20;
		if(!time) time=500;

		var originalStyle=e.style.cssText;
		e.style.position='relative';
		var start=(new Date()).getTime();
		animate();
		function animate(){
			var now=(new Date()).getTime();
			var elapsed=now-start;
			var fraction = elapsed/time;
			if(fraction<1){
				var x=distance*Math.sin(fraction*4*Math.PI);
				console.log('x='+x);
				e.style.left=x+'px';
				setTimeout(animate,Math.min(25,time-elapsed));
			}else{
				e.style.cssText=originalStyle;
				if(oncompleteFun) oncompleteFun(e);
			}
		}
	}
	function fadeOut(e,oncompleteFun,time){
		if(typeof e ==='string')
			e=document.getElementById(e);
		if(!time) time=500;

		var ease=Math.sqrt;

		var start=(new Date()).getTime();
		animate();

		function animate(){
			var elapsed=(new Date()).getTime()-start;
			var fraction = elapsed/time;
			if(fraction<1){
				var opacity = 1-ease(fraction);
				e.style.opacity=String(opacity);
				setTimeout(animate,Math.min(25,time-elapsed));
			}else{
				e.style.opacity='0';
				if(oncompleteFun) oncompleteFun(e);
			}
		}
	}
</script>
</body>
</html>

转载于:https://my.oschina.net/u/1778998/blog/881375