Vue动画

动画增加页面的趣味性，但是 Vue 的动画比较简单，没有 CSS 那么炫酷

1.每个动画分为两部分：进场 和 离场

进场：

• v-enter ： 进场的样式
• v-enter-to ：进场完成的样式
• v-enter-active ：进场的时间段

离场：

• v-leave ：离场的样式
• v-leave-to ：离场完成的样式
• v-leave-active ：离场的时间段

可以看得出 v-enter 和 v-leave-to 这两个时间点 的 样式 是一样的

v-enter-to 和 v-leave 这两个时间点 样式 也是一样的，但是并不怎么设置 这两个时间点的样式，这两个时间点的样式通常被 默认的标准流样式替代

---

一、使用过滤类名实现动画

• 把添加动画的单个元素 使用 Vue 提供的<transition></transition> 包裹起来

• 给添加动画的元素 加上 v-if或者v-show

• 在 head 标签对中 添加 两个类

  .v-enter, .v-leave-to
  {
  transform: translateX(150px);
  	opacity: 0;    
  }
  
  .v-enter-active,v-leave-active
  {
  	transition: all 0.5s ease     
  }
  
  h3//默认标准流 样式
  {
  	transform: translateX(50px);
  }
  
  

  <button @click='flag=!flag'>get</button>
  		<transition>
  			<h3 v-if='flag'>花花世界迷人眼，没有实力你别赛脸</h3>
  		</transiton>
  
  ...
  data:{
      flag:false
  }
  

像上面这么写的话， 句子的刚开始进场的位置(v-enter) 和 离场完成的位置 (v-leave-to)在 句子默认标准流 位置的右边100px

句子默认标准流位置 就是 h3{} 内的定义的样式 同时 也是 默认的v-enter-to 和 v-leave 的位置

为啥不定义一下 v-enter-to 和 v-leave 呢?

我们在 上面代码的基础 下 修改一下 h3 的默认标准流样式 以及在定义一下 v-enter-to 和 v-leave

.v-enter, .v-leave-to
{
transform: translateX(150px);
	opacity: 0;    
}

.v-enter-active,v-leave-active
{
	transition: all 0.5s ease     
}

h3//默认标准流 样式
{
	transform: translateX(0px);
}

.v-enter-to,  .v-leave{
			transform: translateX(50px);
}

会发现因为 如果 v-enter-to 和 v-leave 的样式和 默认标准流位置不一样的话 在进场这个 时间段 完成后 句子最后还是会 回到 默认标准流样式的。 原因是在进场动画完成后，没有点击触发 离场 动画 。则句子样式会 恢复 到默认标准流 。

所以 我们一般不定义 v-enter-to 和 v-leave 。只定义 默认标准流 和 v-enter 和 v-leave-to

---

二、name 属性定义过渡类名的前缀

像上面定义过渡类名都是 v- 开头 . 我们想在不同的元素 实现不同的动画效果 就得要不同的 过渡类。

transition 标签中 的name属性 可以定义 过渡类名前缀

<transition ><h3>哈哈</h3></transition>//没有name属性，默认使用v-开头的过渡类
<transition name='test'><h3>嘻嘻</h3></transition>
    
//内容为 哈哈 的h3 标签 使用 v-开头的过渡类 完成动画效果
//内容为 嘻嘻 的h3 标签 使用 test-开头的过渡类 完成动画效果

---

三、使用 第三方库 实现动画效果

• 在head 标签 中引入 第三方库的样式（这里使用 animate css）

<link rel="stylesheet" type="text/css" href="./lib/animate.css">

• 把需要添加动画的元素，使用 v-if 或者 v-show 进行控制

• 把需要添加动画的元素，使用 Vue 提供的<transition></transition>包裹起来

• 为<transition></transition>添加两个属性enter-active-class 和 leave-active-class

  这两个属性的值去官网找自己喜欢的进场和离场效果，复制粘贴就好了

  animate.style/

• 把需要添加动画的元素，添加一个 class='animated'

  <div id="app">
  		<button @click='flag=!flag'>get</button>
  		<transition enter-active-class='animate__bounceIn' leave-active-class='animate__bounceOut'>
  			<h3 v-if='flag' class="animated">花花世界迷人眼，没有实力你别赛脸😂</h3>
  		</transition>
  </div>
  

---

四、v-for 的列表过渡

• 把v-for 循环渲染的元素 添加 :key 属性

• 在v-for 循环渲染的元素外层，包裹<transition-group></transition-group>

注： transition-group 会在最终页面中渲染成 span 标签 。这样不行

所以在 transition-group 添加 tag='ul' 然后去掉 原来的 ul 标签。这样

transition-group 会被渲染成 ul 标签

• 添加两组类

.v-enter,.v-leave-to
{
	transform: translateY(150px);
	opacity: 0
}

.v-enter-active,.v-leave-active
{
	transition: all 1s ease
}

在我自己写的例子中，我有写 增加列表的功能 和 删除列表的功能

添加列表的时候一切是那么的丝滑

然而到 删除功能就拉了跨

怎么就卡了呢？

原来是 删除的时候 男枪那个 位置 保留着 标准流样式 所以 奥巴马 没办法马上顶上去。那么只要在 离场的时间段 脱离标准流 增加 绝对定位就可以了。既然子元素是绝对定位那么 父元素就要是 相对定位 。

.v-leave-active
{
		position: absolute;
		width: 100% 
     //脱离标准定位 元素内容有多大就显示多大。加上100% 就跟之前一样了
}

现在卡是不卡了，可这顶得也太快了吧。

不要慌加一个 v-move 类 . 通过 .v-move 可以让后续的元素 渐渐的顶上去

.v-move{ transition: all 1s ease }

现在舒服多了。