V2AS问路
Vue过渡和动画效果展示（案例、GIF动图演示、附源码）
阅读原文时间：2022年04月26日阅读：1

前言

本篇随笔主要写了Vue过渡和动画基础、多个元素过渡和多个组件过渡，以及列表过渡的动画效果展示。详细案例分析、GIF动图演示、附源码地址获取。

作为自己对Vue过渡和动画效果知识的总结与笔记。

因内容有案例解读，代码实现，导致篇幅稍长，大约3分钟可以浏览完，如有需要的话（请笔友耐心看完，也可按目录查找所需内容）

如需要全部案例代码：请到文章末尾获取（百度网盘链接，全套案例源码）

PS: 点击模版后的 -->  这个标志可以浏览目录结构，以便快速定位需要的内容

以下案例均是基于此模版实现的（以第一个案例为例）

效果展示：

1
2 3 4 5 6 7 8 Document 9 10 11 12 13 14 15 16 17 18 19 20 47 48 49 50 51 52

53 54 55
56 57
58 71 72 73 74

一、Vue过渡和动画基础

过渡，简而言之，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。

通过标签搭配CSS动画（如@keyframes）可以实现动画效果。动画相比过渡来说，动画可以在一个声明中设置多个状态，例如，可以在动画20%的位置设置一个关键帧，然后在动画50%的位置设置一个完全不同的状态。另外，标签还提供了一些钩子函数，可以结合JavaScript代码来完成动画效果。

（1）代码：

1
21
22
23
24

25 26 27

28
29

30

（2）效果展示：

Vue为标签内部的元素提供了3个进入过渡的类和3个离开过渡的类，

过渡类型

说明

v-enter

进入过渡的开始状态，作用于开始的一帧

v-enter-active

进入过渡生效时的状态，作用于整个过程

v-enter-to

进入过渡的结束状态，作用于结束的一帧

v-leave

离开过渡的开始状态，作用于开始的一帧

v-leave-active

离开过渡生效时的状态，作用于整个过程

v-leave-to

离开过渡的结束状态，作用于结束的一帧

上表中6个CSS类名在进入和离开的过渡中切换的存在周期如下图所示：

Vue中的transition组件允许使用自定义的类名。如果使用自定义类名，则不需要给标签设置name属性。自定义类名是通过属性来设置的，具体属性如下。

  • 进入：enter-class、 enter-active-class、 enter-to-class
  • 离开：leave-class、 leave-active-class、 leave-to-class

自定义类名的优先级高于普通类名，所以能够很好地与其他第三方CSS库结合使用。 animate.css是一个跨浏览器的CSS3动画库，它内置了很多经典的CSS3动画，使用起来很方便。接下来，我们将通过animate.css动画库来演示自定义类名的使用。

（1）实现步骤：

  • 下载并引入animate.css动画库

首先从官方网站获取animate.css文件，保存到文件目录中。其次创建html文件，并在文件中引入animate.css文件

  • 编写HTML结构代码

animated是基本的类名，bounceInLeft是动画的类名

  • 编写JavaScript代码

（2）代码：

1

2 3 5

过渡文字效果


6
7

8

注意：

动画效果都是在事件处理方法中控制的，在元素初始渲染时（页面刚打开时）并没有动画效果。可以通过给transition组件设置appear属性来给元素添加初始渲染的动画效果。

（3）效果展示：

改：

1

2 3 6
过渡文字效果

7
8

9

上述代码中，appear表示开启此特性，appear-class表示初始class样式，appear-to-class表示过渡完成的class样式，appear-active-class会应用在整个过渡过程中。

（3）效果展示：

（1）实现步骤：

@keyframes规则创建动画，就是将一套CSS样式逐步演变成另一套样式，在创建动画过程中，可以多次改变CSS样式，通过百分比或关键词from和to（等价于0%和100%）来规定动画的状态。

（2）代码：

1
25
26
27
28

29 30 31
圆形

32
33

34

（3）效果展示：

（1）实现步骤：

在标签中定义了一些动画钩子函数，用来实现动画。钩子函数可以结合CSS过渡（transitions）、动画（animations）使用，还可以单独使用。

（2）代码：

1

2 @before-enter="beforeEnter" 4 @enter="enter" 5 @after-enter="afterEnter" 6 @enter-cancelled="enterCancelled" 7 @before-leave="beforeLeave" 8 @leave="leave" 9 @after-leave="afterLeave" 10 @leave-cancelled="leaveCancelled" 11 v-bind:css="false"> 12 13

14

（1）实现步骤：

  • 下载并引入velocity.min.js文件

首先从官方网站获取velocity.min.js文件，保存到文件目录中。其次创建html文件，并在文件中引入velocity.min.js文件

  • 编写HTML结构代码

beforeEnter和enter两个入场动画函数，leave是出场动画函数

  • 编写JavaScript代码

（2）示例代码：

1

2 3 @before-enter="beforeEnter" @enter="enter" 4 @leave="leave" v-bind:css="false"> 5

文字动画效果

6 7

8

（3）效果展示：

二、多个元素过渡

（1）实现步骤：

不相同标签名元素可以使用v-if和v-else来进行过渡

（2）代码：

1

2 3
    4
  • 项目1
    • 5 6
7

抱歉，没有找到您查找的内容。

8 9

10

（3）效果展示：

当有相同标签名的元素切换时，需要通过key特性设置唯一值来标记，从而让Vue区分它们，因为Vue为了效率只会替换相同标签中的内容。下面通过案例演示当有相同标签名button时，使用v-if和v-else设置key值来实现切换。

（1）实现步骤：

  • 给同一个元素的key属性设置不同的状态来代替v-if和v-else。
  • 使用多个v-if结合key属性来实现相同标签名的过渡效果。
  • 代码是使用的v-if条件语进行判断的，在这里使用computed计算属性来监控变量show的变化，在页面上进行数据绑定来展示结果

（2）代码：

案例一：使用v-if和v-else设置key值来实现切换

1

2 3
4 5 6 7 8
9

10

案例二：同一个元素的key属性设置不同的状态来代替v-if和v-else

1

2 3
4 5 8 9
10

11

（3）效果展示：

案例三：使用多个v-if结合key属性来实现相同标签名的过渡效果

1
9
10
11
12

13 14
15 16
17

18

19
20

21

22

（3）效果展示：

新旧两个元素参与过渡的时候，新元素的进入和旧元素的离开会同时触发，这是因为的默认行为进入和离开同时发生了。如果要求离开的元素完全消失后，进入的元素再显示出来（如开关的切换），可以使用transition提供的过渡模式mode，来解决当一个组件离开后，另一个组件进来时发生的位置的闪动或阻塞问题。

（1）实现步骤：

过渡模式的原理是，设置有序的过渡而不是同时发生过渡。在transition中加入mode属性，它的两个值如下所示。

  1. in-out ：表示新元素先进行过渡，完成之后当前元素过渡离开
  2. out-in：表示当前元素先进行过渡，完成之后新元素过渡进入

使用out-in实现开关的切换过渡效果。

（2）代码：

1
5
6
7
8

9 10 11 12

13

（3）效果展示：

三、多个组件过渡

多个组件之间的过渡，只需要使用动态组件即可，动态组件需要通过Vue中的元素绑定is属性来实现多组件的过渡。接下来通过案例演示如何实现多个组件的过渡。

（1）实现步骤：

  • 定义登录组件
  • 编写CSS代码
  • 编写JS代码

（2）代码：

1
9
10
11
12
13
16
17
20

21 @click="compontentName='example1'">登录 22 @click="compontentName='example2'">注册 23 24 25 26

27

（3）效果展示：

四、列表过渡

列表过渡，需要使用v-for和transition-group组件来实现。

transition-group组件会以一个真实元素呈现，在页面中默认渲染成标签，可以通过tag属性来修改，如渲染出来就是div标签。

注意：列表的每一项都需要进行过渡，列表在循环时要给每一个列表项添加唯一的key属性值，这样列表才会有过渡效果。在进行列表过渡时，过渡模式不可用，因为不再互相切换特有的元素。

（1）实现步骤：

  • 一个简单的案例讲解列表过渡，通过name属性自定义CSS类名前缀，来实现进入和离开的过渡效果。
  • 在浏览器中打开，查看页面效果。单击“随机插入一个数字”，单击“随机移除一个数字”按钮，效果如下图所示。

（2）代码：

1
24
25
26
27

28 29 30 31 32 {{item}} 33 34 35

36

（3）效果展示：

为了实现列表平滑过渡，可以借助v-move特性。v-move 对于设置过渡的切换时机和过渡曲线非常有用。v-move特性会在元素改变定位的过程中应用，它同之前的类名一样，可以通过name属性来自定义前缀（例如name=“list”，则对应的类名就是list-move），当然也可以通过move-class属性手动设置自定义类名。

Vue使用了FLIP简单动画队列来实现排序过渡，所以即使没有插入或者移除元素，对于元素顺序的变化也支持过渡动画。FLIP动画能提高动画的流畅度，可以解决动画的卡顿、闪烁等不流畅的现象，它不仅可以实现单列过渡，也可以实现多维网格的过渡。FLIP代表First、Last、Invert、Play，有兴趣的读者可以自行研究学习。

（1）实现步骤：

  • 修改上述案例中的CSS部分，借助v-move和定位实现元素平滑过渡到新位置的效果。
  • 下载并引入lodash.min.js文件：首先从官方网站获取lodash.min.js文件，保存到文件目录中。其次创建html文件，并在文件中引入lodash.min.js文件
  • 编写HTML结构代码
  • 编写css样式代码
  • 编写js逻辑代码

（2）代码：

1
18
19
20
21
22

23 24 25 26 {{ item }} 27 28 29

30

（3）效果展示：

在Vue中可以实现列表的交错过渡效果，它是通过data属性与JavaScript通信来实现的。接下来我们通过案例来讲解如何使用钩子函数结合Velocity.js库实现搜索功能，根据关键字来筛选出符合要求的列表数据，并添加过渡效果。

（1）实现步骤：

  • 下载并引入velocity.min.js文件：首先从官方网站获取velocity.min.js文件，保存到文件目录中。其次创建html文件，并在文件中引入velocity.min.js文件
  • 编写HTML结构代码
  • 编写js逻辑代码
  • 在浏览器预览效果
  • 搜索关键字“张”进行查找结果如下图所示

（2）代码：

1

2 3 @before-enter="beforeEnter" 4 @enter="enter" @leave="leave" v-bind:css="false"> 5
  • 7 {{ item.msg }} 8
    • 9     10

    11

    （3）效果展示：

    在Vue中，过渡代码可以通过组件实现复用。若要创建一个可复用的过渡组件，需要将transition或者transition-group作为组件模板结构，然后在其内部通过插槽的方式编写列表结构即可。下面我们就来讲解两种实现过渡的封装的方式。

    （1）实现步骤：

    • template方式，实现列表可复用的过渡
    • 浏览器预览效果如下图所示
    1. 函数式组件：是一种无状态（没有响应式数据）、无实例（没有this上下文）的组件。
    2. 函数式组件只是一个函数，渲染开销很低。

    （2）代码：

    template方式

    1

    2 3 4
  • 6 {{ item.msg }} 7
    • 8     9

    10
    11
    17
    18

    函数式组件方式

    1

    2 3 4
  • 6 {{ item.msg }} 7
    • 8     9

    10
    11

    注意：

    在Vue 2.3.0版本及以下，如果一个函数式组件想要接收props，则必须有props选项；但是在2.3.0以上版本中，可以省略props选项，所有组件上的特性会被自动解析为props。

    （3）效果展示：

    1. 以上便是本篇文章所写的关于如何使用Vue的过渡和动画来实现想要的效果
    2. 内容包括transition组件的使用、内置的CSS类名、自定义类名、配合第三方CSS动画库animate.css实现过渡动画、在过渡钩子函数中使用JavaScript进行操作
    3. 以及配合第三方JavaScript动画库Velocity.js实现过渡动画。

    通过以上的学习，各位笔友应该能够使用Vue完成一些简单的页面过渡效果和动画效果的展示。

    码字不易，认为楼主写的还不错，对你有帮助的话，请给个三连（关注、点赞、收藏）另外有问题可评论区留言讨论。

    后期会完善Vue进阶语法的相关知识，有帮助的话，敬请关注楼主 持续更新中ing 。。。（不定时发文）

    转载时请注明出处链接

    百度云盘案列全套源码获取链接（地址如下）：

    链接：https://pan.baidu.com/s/1_OhACAdsee2AiBOW7JrPbw?pwd=1234
    提取码：1234

    1.vue官方文档：Vue.js (vuejs.org)

    2.传智播客-黑马程序员（教材）：http://stu.ityxb.com/

    1. 十大排序算法（Java实现）（作者力推）：https://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html

    2. Vue开发环境的部署：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-01.html

    3. Vue基础入门一：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-02.html

    4. Vue基础入门二：https://www.cnblogs.com/zbcxy506/p/note_1vue-03.html

    5. Vue基础知识思维导图：https://www.cnblogs.com/zbcxy506/p/note_1vue-04.html

    手机扫一扫

    移动阅读更方便

    阿里云服务器
    腾讯云服务器
    七牛云服务器

    你可能感兴趣的文章

    D3.js的V5版本-Vue框架中使用(第十章) ---流程图
    AngularJS 基础教程一：
    DOM元素的innerHTML属性

    4

    vue 快速入门 系列 —— vue 的基础应用（下）

    5

    PHP 面试知识点整理归纳

    6

    WdatePicker结束日期小于开始日期

    7

    关于elementUI的el-upload实现上传图片，以及显示没有上传的本地图片，本地展示base64的src（el-upload拿取的是file，file->base64，base64->file）

    8

    利用SASS/SCSS切换Vue项目主题色

    9

    Vue计数器演示响应式编程

    10

    Vue以及JS键盘阻止事件