关于animation和transition的深入学习

最新推荐文章于 2024-06-21 17:17:44 发布

javascriptFaker

最新推荐文章于 2024-06-21 17:17:44 发布

阅读量6.1k

点赞数 4

分类专栏： javascript

本文链接：https://blog.csdn.net/makerbeen/article/details/80477612

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前记：最近看了animation和transition最印象深的是这篇博客讲述了两者的区别;https://blog.csdn.net/jdk137/article/details/50474129

建议点进去看一下这篇博客，也可以直接看我接下来的文章会提到两者的区别，而更多的是告诉你怎么让两者看起来没有区别;

【1】两者的第一点区别，触发条件不同，transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。

主要的区别transition不能立即执行，animation不能用事件触发;

先让transition看起来可以立即执行,上代码;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		#box{
			position: relative;
			width: 100px;
			height: 100px;
			background-color: blue;
			left: 0px;
			transition: all 2s;
		}
	</style>
</head>
<body>
	<div id="box">
	</div>
	<script type="text/javascript">
		var box = document.getElementById('box');
		setTimeout(function(){
			box.style.left=100+"px";},0);
	</script>
</body>
</html>

以上利用setTimeout()立即执行函数让它看起来是可以立即执行，其实也不是立即执行因为setTimeout是有一个下限值的，就是执行的时间可能会很短但是确实有时间，但这也是我们用它实现transition的原因，因为transition是一个过渡动画，就是必须有初始状态，如果你直接在全局中修改它的left其实它是不会有过渡动画的，因为会默div块的left为js中的值，不信可以试试;而中间有一个很短的时间自然就可以产生过渡这个效果,当然前端用户看起来完全像是立即执行因为时间太短了，只是不要因为不能立即执行而成为你不用transition的原因;

让animation可以接受事件的控制上代码

第一种改变class名来控制

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.haha{
			position: relative;
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		.haha_slide{
			position: relative;
			width: 100px;
			height: 100px;
			background-color: blue;
			animation:first 2s;
		}
		@keyframes first{
			from:{width: 100px;}
			to{width: 200px;}
		}
	</style>
</head>
<body>
		<div class="haha"></div>
		<script type="text/javascript">
			var canrun = true;
			var t = document.getElementsByClassName('haha');
			t[0].onclick = function(){
				// t[0].style.animationName = "null";
				t[0].className = "haha_slide";
				setTimeout(function(){
					var t = document.getElementsByClassName('haha_slide');
					t[0].className="haha";
				},2000);
			}
		</script>
</body>
</html>

上面每次点击修改class名让它获得animation的值，里面setTimeout的作用是让它一次动画后可以再被点击一次依旧可以执行,就是再把class值恢复为默认值;而2000是该动画运行的时间;

第二种直接修改animation的值来控制

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box{
			position: relative;
			width: 100px;
			height: 100px;
			background-color: blue;
			left: 0px;
		}
		@keyframes first{
			from:{width: 100px;}
			to{width: 200px;}
		}
		@keyframes second{
			from:{left: 0px;}
			to{left: 100px;}
		}
	</style>
</head>
<body>
		<div class="box"></div>
		<script type="text/javascript">
			var canrun = true;
			var t = document.getElementsByClassName('box');
			t[0].onclick = function(){
				t[0].style.animation ="first 2s";
				setTimeout(function(){
					t[0].style.animationName = "second"
				},2000)
			}
		</script>
</body>
</html>

上面通过js修改animation的值来创建动画，如果想要再次执行某个动画就把那个动画用setTimeout初始化一次（像之前初始化一样），然后点击再执行当前动画;这样就达到了js事件控制animation动画执行的时机，这样就不用再因为js事件控制动画而放弃用animation；

【2】两者第二点区别,animation可以设定循环次数

主要区别也就是trasition不可以设定循环次数

那么就让trasition可以假循环，上代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		#box{
			position: relative;
			width: 100px;
			height: 100px;
			background-color: blue;
			left: 0px;
			transition: left 2s;
		}
	</style>
</head>
<body>
	<div id="box"
	</div>
	<script type="text/javascript">
		var t = document.getElementById('box');
		t.onclick = function(){
			t.style.left = 100+"px";//第一帧
			setTimeout(function(){
				t.style.transitionProperty = "width";
				t.style.width=200+"px"; //第二帧
				setTimeout(function(){
					t.style.transitionProperty = "left,width";
					t.style.left=300+"px";//第三帧
					t.style.width=100+"px";
				},2000)
			},2000);
		}
	</script>
</body>
</html>

上面用了setTimeout每次当动画结束到达下一帧重新改变它的transitionProperty的值，然后进入下一帧的动画；这里的每一帧是嵌套的，其实也可以不嵌套但是每次setTimeout的时间是前面多个动画时间的总合；（可以自己尝试下去实现）

【4】两者的第四点区别,animation与js的交互不是很紧密;个人觉得两者真正的区别是，animation已经写死了各个属性的变化值，但是可以在不同的动画之间选择，而transition而是各个动画都必须是写在一个地方写死的，而它的属性值可以发生改变；其实两者的区别都可以用setTimeout的方式去弥补，只是哪个更便利；

【5】两者各自的优势

1. 如果要灵活定制多个帧以及循环，用animation.

2. 如果要简单的from to 效果，用 transition.

3. 如果要使用js灵活设定动画属性，用transition.

本文就是当你因为便利选择了其中之一，但需要用到另一者的方式给出了各种骚操作；

git更新js,animation,transition写的三种轮播图；https://github.com/fakerjavascrip/summary/tree/master/slide

javascriptFaker

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
关于animation和transition的深入学习

前记：最近看了animation和transition最印象深的是这篇博客讲述了两者的区别;https://blog.csdn.net/jdk137/article/details/50474129建议点进去看一下这篇博客，也可以直接看我接下来的文章会提到两者的区别，而更多的是告诉你怎么让两者看起来没有区别;【1】两者的第一点区别，触发条件不同，transition通常和hover等事件配...
复制链接

扫一扫

专栏目录