Vue动画详解

Vue动画详解

  • Vue动画详解
    • Vue插入
    • Vue动画
    • transform变形

Vue动画详解

Vue插入

1、前言

Vue在插入、更新或者移除DOM时,提供了多种不同方式的应用过渡效果。包括以下工具:

. 在CSS过渡和动画中自动应用class

. 可以配合使用第三方CSS动画库,如:Animate.css

. 在过渡钩子函数中使用JavaScript直接操作DOM

. 配合使用第三方JavaScript动画库,如:Velocity.js

2、过渡或动画的了解

Vue提供了transition的封装组件,来处理过渡以及动画

2.1 使用过渡或动画的场景

在下列情况中,可以给任何元素和组件添加进入/离开过渡

\1. 条件渲染(使用v-if)

\2. 条件展示(使用v-show)

\3. 动态组件

\4. 组件的根节点

2.2 使用说明

\1. 只有dom从隐藏到显示,或显示到隐藏,才能使用Vue的过渡或动画

\2. 动画的元素需要被Vue所提供的组件transition所包裹

\3. 在插入或删除transition包裹元素时,Vue会在恰当的时机添加或删除类名

\4. 如果过渡的组件提供了Ja

你可能感兴趣的:(vue.js,动画,javascript)