第四章 Vue过渡和动画

so.far_away

已于 2022-12-20 22:02:09 修改

阅读量1.3k

点赞数 3

分类专栏： Vue.js笔记文章标签： vue.js javascript 前端

于 2022-11-19 12:48:57 首次发布

本文链接：https://blog.csdn.net/qq_51580006/article/details/127872327

版权

Vue.js笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

@TOC

4.1过渡和动画基础

4.1.1什么是过渡和动画

1.过渡

从一个状态向另外一个状态变化的过程，新的状态替换了旧的状态
动画和过渡的不同：
在这里插入图片描述
简言之，过渡只能控制开始和结束；动画可在指定帧位置，更细腻更精准

过渡语法:

<transition name="fade">
	<!--需要添加过渡的div标签>
	<div></div>
</transition>

注：name指定的是过渡所需要的样式名的前缀

2.transition组件

Vue为transition标签内部的元素提供了3个进入过渡的类和3个离开过渡的类：
在这里插入图片描述

v-enter进入前的那一刻，和v-leave-to离开结束的那一刻，就是隐藏的状态
v-enter-to进入结束的那一刻，和v-leave离开前的那一刻，就是显示的状态
v-enter-active与v-leave-active，是进入显示的整个过渡过程，与离开隐藏的整个过渡过程

3.自定义类名

Vue中的transition组件允许使用自定义的类名，如果使用自定义类名，则不需要给transition标签设置name属性，自定义类名是通过属性来设置的，具体属性如下：
进入：enter-class、enter-active-class、enter-to-class
离开：leave-class、leave-active-class、leave-to-class

animate.css是一个跨浏览器的CSS3动画库，它内置了很多经典的CSS3动画，使用起来很方便
在这里插入图片描述
动画效果都是在事件处理方法中控制的，在元素初始渲染时（页面刚打开时）并没有动画效果。可以通过给transition组件设置appear属性来给元素添加初始渲染的动画效果

4.使用@keyframes创建CSS动画

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

@keyframes animation-name{
	keyframes-selector{css-styles;}
}

在这里插入图片描述
@keyframes可以通过百分比的形式来规定动画的状态

5.钩子函数实现动画

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

6.Vue结合Velocity.js实现动画

①下载并引入velocity.min.js文件
②编写HTML代码
③编写JavaScript代码
在这里插入图片描述
Velocity.js是一个简单易用，高性能且功能丰富的轻量级JS动画库
在动画钩子函数中可以利用velocity来确定执行的动画
velocity第一个参数是DOM元素，第二个参数是css样式，第三个参数表示动画的配置项
第三个参数可以配置duration动画时长，也可以配置动画完成complete

4.2多个元素过渡

transition组件在同一时刻内只能显示一个元素
当有多个元素时，需要使用v-if、v-else或者v-else-if来区别显示条件，并且元素要绑定不同的key值，否则Vue会复用元素，无法产生动画效果

4.2.1不同标签名元素过渡

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

4.2.2相同标签名元素过渡

当相同标签名的元素切换时，需要通过key特性设置唯一值来标记，从而让Vue区分它们，因为Vue为了效率只会替换相同标签中的内容
在这里插入图片描述
通过绑定key来代替v-if和v-else

多个v-if结合key属性来实现相同标签名的过渡效果

使用computed计算属性来监控变量show的变化

4.2.3过渡模式

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

4.3多个组件过渡

多个组件之间的过渡，只需要使用动态组件即可，动态组件需要通过Vue中的component元素绑定is属性来实现多组件的过渡

mode属性有in-out和out-in两个值，后者更符合人类认知

4.4列表过渡

4.4.1什么是列表过渡

transition一般用于处理单个元素，或者同一时间渲染多个元素中的一个
列表过渡，需要使用v-for和transition-group组件来实现

<transition-group name="list" tag="div">
	<span v-for="item in items" :key="item">
	{{item}}
	</span>
</transition-group>

transition-group组件会以一个真实元素呈现，在页面中默认渲染成span标签，可以通过tag属性来修改，如transition-group tag="div"渲染出来就是div标签
总结：
列表过渡就是通过v-for循环显示多个元素，并且通过transition-group组件来给这多个元素同时添加过渡效果
列表中的每一项都需要进行过渡，列表在循环时要给每一个列表项添加唯一的key属性值，这样列表才会有过渡效果。在进行列表渲染时，过渡模式不可用，因为不再互相切换特有的元素

4.4.2列表的进入过渡和离开过渡

在这里插入图片描述

splice方法是用来替换或删除数据，第二个参数是0表示删除0个数据，然后第一个参数是替换位置
第二个参数是1表示删除一个数据，删除位置为第一个参数

4.4.3列表的排序过渡

1.v-move

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

当插入或移除元素的时候，虽然有过渡动画，但是周围的元素会瞬间移动到新的位置，而不是平滑地过渡
为了实现平滑过渡，可以借助v-move特性
v-move特性会在元素改变定位的过程中应用，它同之前的类名一样，可以通过自定义前缀

2.FLIP

vue使用FLIP简单动画队列来实现排序过渡，所以即使没有插入或者移除元素，对于元素顺序的变化也支持过渡动画
FLIP动画能提高动画的流畅度，可以解决动画的卡顿、闪烁等不流畅的现象，它仅可以实现单列过渡，也可以实现多维网格的过渡
FLIP代表First、Last、Invert、Play
需要下载并引入lodash.min.js文件
在这里插入图片描述

4.4.4列表的交错过渡

在Vue中可以实现列表的交错过渡效果，它是通过data属性与JavaScript通信来实现的
使用钩子函数结合Velocity.js库实现搜索功能：
①下载并引入velocity.min.js文件
②编写html结构代码
在这里插入图片描述
:data-index是自定义的属性
③编写js逻辑代码
filter方法可以用来遍历数组里的每一项，而filter方法里边可以定义筛选的方法用来指定条件获得想要的元素

indexof能够判断字符串中是否存在某一字符

Velocity第一个参数是绑定的元素，第二个参数是动画
使用钩子函数结合Velocity可以使搜索出的元素在进入和离开时有过渡效果