使用 Vue 实现 CSS 过渡与动画效果

一、基础使用

• 通过 class 实现。
• 动画

• 过渡

• 通过 class 与 style 共同实现过渡

二、使用 transition 标签实现

• 过渡

• 动画，修改 transition 的name属性

三、自定义过渡 class 类名

• 我们可以通过以下 attribute 来自定义过渡类名：
  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class
• 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css. 结合使用十分有用。

示例：

四、动画和过渡一起进行

• 通过 type 设置最终时长。

• 通过 duration 设置最终时长。

五、使用 JavaScript 动画

• 可以在 attribute 中声明 JavaScript 钩子

  :css="false"
>

六、多个单元素标签的切换

• 可以设置 mode 改变过度模式，默认进入和离开是同时生效的。

• in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
• out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
• 可以通过 appear attribute 设置节点在初始渲染的过渡。

七、多个组件之间的过渡

八、状态动画