单元素/组件过渡
Vue在插入、更新或者移除 DOM 时,提供多种不同方式的过渡效果(一个淡入淡出的效果)
在条件渲染(使用v-if)、条件展示(使用v-show)、动态组件、组件根节点等情形中,可以给任何元素和组件添加进入/离开过渡
Vue提供了内置的过渡封装组件<transition>,该组件用于包裹要实现过渡效果的组件
语法如下:
<transition name = "过渡名称">
<!--要实现过渡效果的组件-->
</transition>
class过渡
过渡效果分为两部分:进入和离开,在进入/离开的过渡中,有6个class切换
1. v-enter-from 定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
2. v-enter-active 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间、延迟和曲线函数。
3. v-enter-to 定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时 v-venter-from 被移除),在过渡/动画完成之后移除。
4. v-leave-from 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。 5. v-leave-active 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间、延迟和曲线函数。
6. v-leave-to 定义过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 vleave-from 被删除),在过渡/动画完成之后移除。
css过渡
常用的过渡一般都是CSS过渡
CSS过渡,顾名思义也就是使用过渡class定义CSS实现过渡效果
css动画
CSS动画与CSS过渡用法相同
区别是在动画中v-enter类名在节点插入DOM后不会立即被删除,而是在animationend(动画结束)事件触发时删除
同时使用过渡和动画
在一些应用场景中,需要给一个元素同时设置过渡和动画,比如 animation 很快的被触发并完成,而 transition 效果还没结束。这时,需要使用 type属性并设置 animation 或 transition值来明确声明需要Vue监听的类型。
在<transition> 组件的 duration prop上可显性定义过渡持续时间(以毫秒计)
比如,定制进入和移出的持续时间:
<transition :duration="{ enter:1000, leave: 2000 }">...</transition>
还可以通过appear属性设置DOM节点在初始渲染的过渡(页面加载的初次过渡动画):<transition appear>...</transition>
JavaScript 钩子方法
多元素/组件过渡
对于原生元素可以使用v-if/v-else实现多元素过渡。
最常见的多元素过渡是一个列表和描述这个列表为空消息的元素:
<transition>
<table v-if="items.length > 0">
<!-- ... -->
</table>
<p v-else>没有列表内容</p>
</transition>
实际上,通过使用多个v-if或将单个元素绑定到一个动态属性上,可以在任意数量的元素之间进行过渡。
可以使用多组件过渡将多个组件包装成动态组件的效果
列表过渡
对于列表元素,可使用<transition-group>组件进行过渡。
<transition-group>组件具有以下几个特点:
1、不同于 <transition>组件,它默认以<span>元素渲染。
2、过渡模式不可用,因为不再相互切换特有的元素。
3、内部元素需要提供唯一的key属性值。
4、CSS过渡类将会应用在组件内部的元素中,而不是组件本身。
<transition-group> 组件不仅可以进入和离开列表过渡,还可以通过v-move特性改变定位,进行平滑过渡。
v-move特性像之前的类名一样,可以通过name属性来自定义前缀
利用move属性,进行变换过渡,即一个列表中的列表项既不增加也不减少,只是不断地变换其位置
FLIP动画不仅可以实现单列表过渡,多维网格列表的过渡也同样简单
总结
Vue的过渡与动画,主要用到transition组件,该组件一般搭配v-if、v-show、动态组件、组件根节点来使用。
对列表进行过渡渲染时,不能再使用transition,必须使用transition-group组件包裹。如果需要实现列表进入时的动画,可以给transition-group添加appear属性即可。
在Vue中,元素过渡的流程是:
1、将要过渡的元素放入transition组件中。可以写多个transition组件,如果没有定义名称,在写6个class时,那么v-开头的class可以控制所有的过渡,如果给了名称,那么只能控制与名称对应的过渡。
2、通过vue实现对transition中的元素进行插入或删除操作。
3、在对应的6个class中写CSS代码,实现在插入或删除完成前过渡效果。