vue总结04--transition过渡动画

vue过渡动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

---

• 在 CSS 过渡和动画中自动应用 class
• 配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM

---

css过渡动画

transition组件会为嵌套元素自动添加class，可用于做css过度动画

---

一、使用步骤

1. 使用transition组件
2. 定义过渡动画

二、简单例子

代码如下（示例）：

<style>
/* 定义过度动画 fade为过渡动画的名字*/
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .5s;
	}
	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}
</style>
<script>
	Vue.component('message', {
	// 使用transition组件应用过渡动画
	template: `
	<transition name="fade">
	...
	</transition>
	`,
})

三.动画过渡过程

1. v-enter ：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移
   除。

2. v-enter-active ：定义进入过渡生效时的状态。在元素被插入之前生效，在过渡/动画完成之后移除。

3. v-enter-to : 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移
   除)，在过渡/动画完成之后移除。

4. v-leave : 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active ：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to : 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
   
   .fade-enter { opacity: 0; }
   .fade-enter-active { transition: opacity .5s; }
   .fade-enter-to { opacity: 1; }
   .fade-leave { opacity: 1; }
   .fade-leave-active { transition: opacity .5s; }
   .fade-leave-to { opacity: 0; }

---

四.使用css动画库

1.引入animate.css

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

transition设置

<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">

五.使用钩子函数

可以在属性中声明 JavaScript 钩子，使用JS实现动画。

<transition
	v-on:before-enter="beforeEnter" // 动画开始前，设置初始状态
	v-on:enter="enter" // 执行动画
	v-on:after-enter="afterEnter" // 动画结束，清理工作
	v-on:enter-cancelled="enterCancelled" // 取消动画
	v-on:before-leave="beforeLeave"
	v-on:leave="leave"
	v-on:after-leave="afterLeave"
	v-on:leave-cancelled="leaveCancelled"
></transition>

	js中
		methods: {
			// 比如要做某些动画效果等
			beforeEnter(el) {
				el.style.opacity = 0 // 设置初始状态
			},
			enter(el, done) {
				el.style.opacity = 1 // 设置结束状态
			}
	}

六.列表过渡

利用transition-group可以对v-for渲染的每个元素应用过度

<transition-group name="fade">
		<div v-for="item in items" :key="item.id">
		     {{ item.text }}
		</div>
</transition-group>