过渡与动画

单元素/组件过渡

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代码,实现在插入或删除完成前过渡效果。

上一篇:linux kernel内存泄漏检测工具之slub debug


下一篇:【算法小白周赛2】A.朋友遍天下(easy)C++代码和题解-说明/提示