进入/离开 & 列表过渡

单元素/组件过渡

插入、更新、移除 DOM 时，提供应用过渡效果。

过渡类名

  • v-enter
    过渡开始的状态。元素插入前生效，插入后失效。
  • v-enter-active
    进入过渡生效时的状态。元素插入之前生效，在过渡或者动画完成之后移除。
    在整个进入过渡的阶段中应用。
    被用来定义进入过渡的时间，延迟，曲线函数等。
  • v-enter-to
    进入过渡的结束状态，元素被插入后生效，（同时 v-enter 被移除）。
    在过渡完成之后移除。
  • v-leave
    离开过渡的状态。离开过渡被触发时，立即生效，之后下一帧被移除。
  • v-leave-active
    离开过渡生效时的状态。
    在整个离开过渡的阶段中应用。
    在离开过渡被触发时，立即生效。
    在完成过渡或者动画之后被移除。
    被用来定义离开过渡的过程时间，延迟，曲线函数。
  • v-leave-to
    离开过渡的结束状态
    在离开过渡被触发之后 的下一帧生效，同时 v-leave 被移除。
    在过渡或者动画完成之后移除。

    CSS 过渡

    CSS 动画

    JavaScript 钩子函数

    初始渲染的过渡

    appear 设定元素在初始渲染的过渡

  1. appear 属性

    1. `<transition appear></transition>`

  2. 自定义钩子函数

    1. `v-on:appear`

    多个元素的过渡

    原生标签 使用 v-if/v-else

    过渡模式

    mode：
    - in-out
    - out-in

    多个组件过渡

    列表过渡

  • v-for 中 使用 <transition-group> ， 他会默认渲染成为一个 <span>, 使用 属性 tag 更换他的渲染
  • 内部元素 总是需要 提供唯一的 key 属性值。