目录

• • • transition组件
    • • 作用
      • • 过渡时机
      • 语法1
      • 语法2
      • • 使用-animation侦动画
        • 使用-过渡动画
      • 总结

transition组件

作用

transition组件的作用是 给 单个 元素/组件 添加过渡效果；
transition-group组件的作用是给 多个 元素/组件 添加过渡效果；

过渡时机

• vue只有在插入、更新、销毁DOM元素时，才会触发过渡效果
• 所以只有 标签/组件 在被插入、更新、销毁的时候，封装成transition组件才会出现过渡效果。

语法1

• 简单元素

  toggled content
  
  

• 动态组件
  • is属性的值为要渲染的组件的组件名；
  • component标签在渲染时会渲染为通过is属性传入的组件，上面代码本质是

  • 因此若是要给组件传值，仍然可以使用 属性名=属性值 的形式进行传递

注：transition只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素(类似template)。

语法2

当 标签/组件 使用 transition包裹后，组件的挂载/卸载将会通过以下6个类名以供我们控制过渡效果

• v-enter-active
• v-leave-active
• v-enter
• v-enter-to
• v-leave
• v-leave-to

但是若是页面中存在多个transition并且他们的动画效果不一致时，可以通过name属性来进行单独设置

如上将name属性设置为xxx，那该组件内包裹的元素的动画效果将会通过以下6个类名进行控制

• xxx-enter-active
• xxx-leave-active
• xxx-enter
• xxx-enter-to
• xxx-leave
• xxx-leave-to

这六个类名的作用分别是什么？ 将会在 使用 中进行具体说明。

使用-animation侦动画

• 上述代码的动画效果可以复制打开页面观看
• xxx-enter-active表示元素进入过程中所执行的样式(动画)；
• xxx-leave-active表示元素离开过程中所执行的样式(动画)；

使用-过渡动画

• xxx-enter表示元素进入之前的样式
• xxx-enter-to表示元素进入之后的样式
• xxx-leave表示元素离开之前的样式
• xxx-leave-to表示元素离开之后的样式
• 通过上述类名设置样式后还需要添加一个过渡效果这个过渡效果还是秉承之前的原则->谁过渡给谁加，也可通过xxx-enter-active与xxx-leave-active进行添加；

总结

• 本质：vue就是在监听组件的插入、更新、销毁，然后给其加上对应的类名。
• 6个类
  • [1] xxx-enter-active表示元素进入过程中所执行的样式(动画)
    • 在组件“进入”页面时会自动将该类名添加在被transition组件包裹的标签上
    • 渲染完毕移除该类名;
  • [2]xxx-leave-active表示元素离开过程中所执行的样式(动画)
    • 在组件“离开”页面时会自动将该类名添加在被transition组件包裹的标签上至销毁完毕；
  • [3]xxx-enter表示元素进入之前的样式
    • 在组件“进入”页面时将该类名添加在被transition组件包裹的标签上
    • 进入后将该类名移除(只是一瞬间不易观察)
  • [4] xxx-enter-to表示元素进入之后的样式
    • 在组件“进入”页面后将该类名添加在被transition组件包裹的标签上
    • 渲染完毕移除该类名;
  • [5] xxx-leave表示元素离开之前的样式
    • 在组件“离开”页面时会自动将该类名添加在被transition组件包裹的标签上；
    • 销毁过程中移除(只是一瞬间不易观察)
  • [6]xxx-leave-to表示元素离开之后的样式
    • 在组件“离开”页面后会自动将该类名添加在被transition组件包裹的标签上至销毁完毕；
  • 若是配合帧动画使用-> 仅需[1]、[2]即可；
  • 若是配置过渡动画使用 -> 需要6个类搭配使用；