Vue动画简述

概述

Vue中可以使用 <transition> 和 <transition-group> 标签来定义元素的过渡或动画效果

二者最大的区别是，在使用 v-for 循环时，必须使用<transition-group>标签。其他时候使用<transition>

1.css类名

你可以在CSS中使用过渡类名来定义，过渡的效果

1. .v-enter：过渡开始前的状态
2. .v-enter-active：开始过渡中的状态，多为定义时间，延迟和速率函数
3. .v-enter-to：过渡之后的状态
4. .v-leave：离开之前的状态
5. .v-leave-active：离开过渡中的状态，多为定义时间，延迟和速率函数
6. .v-leave-to：离开之后的状态

以上的类名都对<transition>和<transition-group>生效

直接在CSS定义即可

//CSS
.v-enter{}
.v-enter-active{}
.v-enter-to{}
.v-leave{}
.v-leave-active{}
.v-leave-to{}

//HTML
<transition> //使用时直接包裹想要过渡的元素外即可
   <li>  </li>
</transition>

还可以使用行内 class 进行自定义，直接在行内添加相关class即可。与animation.css一起用效果很好

<transition enter-class =""
            enter-active-class=""
            enter-to-class=""
            leave-class=""
            leave-active-class=""
            leave-to-class=""> 
   <li>  </li>
</transition>

2.过渡持续的时间

使用:duration属性定义过渡持续的时间

//方法一：
<transition :duration="1000">...</transition>
//方法二：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

与方法一不同的是，方法一 定义了开始和结束的时间，都是1000ms。方法二分开定义开始和结束的过渡时间。

3.初始渲染

有时我们可能想在一加载页面时，就触发过渡动画。Vue 给我们提供了这个属性实现它

appear 属性设置页面刚刚加载时的过渡效果
与其他过渡一样，它也可以自定义CSS类名

<transition
  appear //只设置此属性时，触发 enter时所定义的效果
  //设置下面的属性可以自定义appear效果
  appear-class=""
  appear-to-class="" 
  appear-active-class=""
>
  <!-- ... -->
</transition>

4.列表过渡

列表循环的元素，也就是带有 v-for 指令的元素实现过渡时，必须要加上-group，如下

<transition-group tag="ul"> //这里的 tag 属性可以自定义占位的标签
	<li v-for="list"></li>	
</transition-group>

注意：

• <transition-group>标签内的元素(第一层)必须带有唯一的key值，若有多个元素，也要提供不同的key值。若是提供的 key ，无法识别元素身份，那么过渡效果将出现问题。
• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

5.v-move（平滑过渡）

在使用Vue过渡时，总有些元素会被动的受影响（导致这些元素状态发生变化），而这些元素又没有添加被影响时的过渡效果，所以元素状态改变时的动作会很突兀。

在CSS中定义 .v-move 类便可以解决这一问题。与其他的过渡类一样，v-move 也可以在<transition-group>元素中定义move-class=""。如下：

//情况一：在css中定义
    .v-move{
        transition: transform .6s;
        transition-delay: .3s;
    }

//情况二：在元素中定义类名
    .hos{
        transition: transform .6s;
        transition-delay: .3s;
    }
	
    <transition-group  move-class="hos" tag="ul">
        <li v-for="item in list" :key="item.id">
            {{ item}}
        </li>
    </transition-group>

注意：在定义v-move时，要在 v-leave-active中定义属性 position: absolute;，目的是要让在离开运动发生时，将该元素脱离文档流，此时被影响的元素便会触发过渡效果。

本文叙述了最基础的一些 vue 过渡的概念和使用 很喜欢官方文档的一句话：

创建动态过渡的最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话，唯一的限制是你的想象力。