vue过渡动画的transition组件

什么是过渡动画

就是从一个状态向另一个状态插入值，新的状态替换了旧的状态。

transition

Vue为标签内部的元素提供了3个进入过渡的类和3个离开过渡的类。如下：
进入过渡的类：

• v-enter 开始
• v-enter-active 过渡
• v-enter-to 结束
  离开过渡的类：
• v-leave 开始
• v-leave-active 过渡
• v-leave-to 结束

基本使用方法：

在动画的标签外面嵌套一个标签，当为添加name=“名字”；例name=“fade”,fade就是在过渡中切换的类名前缀，例：.fade-enter;如果没有设置name，v-就是过渡中切换的类名前缀。（推荐使用添加name的 方式，这样在应用到另一个过渡时就不会产生冲突了）

Vue中实现过渡动画的三种方法：

1. 利用vue的transition标签结合css样式实现动画
2. 利用animate.css结合transition实现动画
3. 利用vue钩子函数实现动画

使用标签不添加name的方式创建动画：

p标签的显示过渡动画：
要求：当点击按钮时，p标签渐隐渐入：

<style type="text/css">
			/* 进入三个状态 */
			.v-enter{
   
   
				opacity:0;
			}
			.v-enter-to{
   
   
				opacity:1;
			}
			.v-enter-active{
   
   
				transition:opacity 3s; 
			}
			/* 离开 */
			.v-leave{
   
   
				opacity:1;
			}
			.v