6.6Vue中的动画特效

最新推荐文章于 2024-04-12 05:33:02 发布

ATWLee

最新推荐文章于 2024-04-12 05:33:02 发布

阅读量493

点赞数 2

分类专栏： Vue基础学习

本文链接：https://blog.csdn.net/BWater_monster/article/details/102290699

版权

Vue基础学习专栏收录该内容

57 篇文章 0 订阅

订阅专栏

1.Vue中的CSS动画（包括keyframes形式的动画，transition过渡动画）

动画原理

上图是由隐藏变为显示：enter的原理过程：
例如：一开始，enter为0（需要在css样式自己写这个类，并赋值opacity（透明度）为0）（opacity为0，隐藏），下一帧，enter销毁变为enter-to（opacity为1，显示），enter-active贯穿整个过程，监测是否变化。

显示变为隐藏：leave
不同的是，一开始leave为1，下一帧，leave销毁变为leave-to（opacity为0，隐藏）（需要自己写css样式并赋值）

	<style>
		.sh-enter,.sh-leave-to{
			opacity: 0;
		}
		.sh-enter-active,.sh-leave-active{
			transition: opacity 1s;
		}
	</style>
	
<body>
	<div id="root">
		<transition name="sh"><!--这里的name决定的css样式的名字，如果没有，则默认为v-enter/leave-->
			<div v-show="show">hello world</div><!--这里除了v-show，还可以用v-if以及动态组件-->
		</transition>
		<button @click="btnClick">Change</button>	
	</div>

	<script>
		var vm = new Vue({
			el: '#root',
			data: {
				show: true
			},
			methods: {
				btnClick: function(){
					this.show=!this.show
				}
			}
		})
	</script>
</body>

补充个知识点：当用到transition标签时，会自动创建enter-active、leave-active这样的类。也可以自定义类的名字，但是要在标签中自定义类的名字<transition name="sh" enter-active-class=“自定义的名” leave-active-class=“自定义的名”>比如上文的是sh-enter-active，如果自定义了就是：自定义的名{}

2.在Vue中使用Animate.css库

keyframes形式的c3动画

<style>
	/*定义一个名为a的keyframes动画效果*/
	@keyframes a{
		0% {
			transform: scale(0);
		}
		50% {
			transform: scale(1.5);
		}
		100% {
			transform: scale(1);
		}
	}
	.sh-enter-active{
		/*transform-origin：保证动画执行过程中的位置*/
		transform-origin:left center;
		/*调用动画效果：a*/
		animation: a 1s;
	}
	.sh-leave-active{
		transform-origin:left center;
		/*reverse反向执行*/
		animation: a 1s reverse;
	}
</style>

Animate库：如上文的keyframes形式的c3动画可以在头文件中直接导入Animate库，而不需要再书写（@keyframes 不用写，style中的enter-active、leave-active不用写）
需要协同的是上文补充的知识点，自定义类名必须是“animate ???”（这里的 ???是不同的样式名，具体选择什么样式在animate官网上可以找到）

3.在Vue中同时使用过渡和动画

在补充个知识点：当页面第一次加载时，并没有动画效果，如果想让页面第一次渲染时就有动画效果，需要在transition标签中，再加入两个属性。
appear、appear-active-class=“animated 效果名”
在这里插入图片描述
1.vue同时使用动画与过渡效果方法：
animate库定义的是@keyframes形式的动画，如果想和过渡动画同时使用，需要在自定义类名中加上“transition标签的name-enter/leave-active（transition自动创建的类）”，并且style标签中写过渡代码（上文1）。

2.动画与过渡效果的时长问题：
由于animate库的动画效果（库文件已定义好）与过渡动画效果（transition）的时间不同，所以需要在transition标签中加上属性：type=“transition”（意思是我的动画既有animate动画又有transition过渡动画，且动画时长以transition的动画时长为准）

除此之外，还可以自定义时长
在transition标签中加上：duration=“2000”（2000ms）的属性，就是自定义时长

复杂的自定义时长
：duration={enter: 10000, leave: 20000}（进场10000ms，出场20000ms）

4.Vue中的JS动画与Velocity.js（动画库）的结合

之前都是通过css实现动画效果，js也可以实现动画效果，Vue中提供了很多js动画钩子（事件）
在这里插入图片描述
通过事件触发处理函数，before和after中都有一个参数el（被transition包裹的标签），enter/leave会有两个参数，第一个是el，第二个参数done表示该过程已结束，用法是done()