<强>概述
Vue在插入,更新或者移除DOM时,提供多种不同方式的应用过渡效果。
包括以下工具:
-
<李>在CSS过渡和动画中自动应用类李
<李>可以配合使用第三方CSS动画库,如Animate.css李
<李>在过渡钩子函数中使用JavaScript直接操作DOM李
<李>可以配合使用第三方JavaScript动画库,如Velocity.js李
<强>单元素/组件的过度
Vue提供了过渡的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
-
<李>条件渲染(使用v)
<李>条件展示(使用v-show)
<李>动态组件
<李>组件根节点李
这里是一个典型的例子:
运行结果如下:
点击肘按钮会看见文字淡入淡出的效果。
当插入或删除包含在过渡组件中的元素时,Vue将会做以下处理:
-
<李>自动嗅探目标元素是否应用了CSS过渡或动画,如果是,在恰当的时机添加/删除CSS类名。
<李>如果过渡组件提供了JavaScript钩子函数,这些钩子函数将在恰当的时机被调用。
<李>如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画,DOM操作(插入/删除)在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和Vue的nextTick概念不同)
<>强过度的CSS类名
-
<李> <代码> v-enter>
<李> <代码> v-enter-active>
<李> <代码> v-enter-to>
<李> <代码> v-leave>
<李> <代码> v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在过渡/动画完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
<李> <代码> v-leave-to>
对于这些在进入/离开过渡中切换的类名,v -是这些类名的前缀。使用& lt;过渡name=白洹笨梢灾刂们白?比如v-enter替换为my-transition-enter。
<强> CSS过度
常用的过渡都是使用CSS过渡。以下为示例代码。
运行结果
