过渡&动画

[jiaozitang]

进入、离开、列表过渡

1.单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 ex:

1.1 过渡的类名

1.2 CSS 过渡

1.3 自定义过渡的类名

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+) 引入外部动画css库<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

1.4 同时使用过渡和动画

1.5 显性的过渡持续时间

<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

2. 初始渲染的过渡

appear 特性设置节点在初始渲染的过渡

3.多个元素的过渡

给在 组件中的多个元素设置 key 是一个更好的实践。

3.1 过渡模式

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。

• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

  <transition name="fade" mode="out-in"></transition>

4.多个组件的过渡

使用动态组件

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

5.列表过渡

使用 <transition-group>组件，需要设置key值 不同于 ，它会以一个真实元素呈现：默认为一个 。你也可以通过 tag 特性更换为其他元素。

5.1 列表的进入/离开过渡

5.2列表的排序过渡

v-move 特性，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置