vue 之 Transition 各种动画实现，一文让你会动画
在开发中，如果没有动画的话，整个页面内容的显示和隐藏会非常的生硬！不好看，为了给予一定的用户体验，进入今天的主题
目录
一、Transition组件
1.Transition组件的原理
进入
离开
2、Transition组件中使用transition
代码
效果
说明
3、Transition组件中使用animation
代码
效果
4、Transition组件的type属性
代码
效果
5、Transition组件的duration属性( 用的比较少 )
基本设置 : 同时设置进入和离开的时间
对象设置 : 分别设置进入和离开的时间
6、 Transition组件的mode属性
代码
效果
缘由和解决
7、 Transition组件的appear属性
8、 Transition组件的回调函数
二、使用animate.css第三方动画库
1.安装
2.导入
3.使用
01-在css中使用
02-使用class类名
三、使用gsap库 ( JS库 )
1.安装
2.导入
3.使用
4.效果
5.gsap额外补充 ( 数字变化效果 )
代码
效果
四、列表的过渡 transition-group
1.列表数字增加删除效果
01-代码
02.效果优化
03.增加洗牌效果
2.列表的交替动画效果
01-用css实现
02-使用js实现动画
五、写在最后
- React框架本身并没有提供任何动画相关的API，所以如果需要使用的话可以使用一个第三方库react-transition-group
- Vue中为我们提供了一些内置的组件和对应的API来完成动画
一、Transition组件
1.Transition组件的原理
当插入或删除包含在transition组件中的元素时，vue将会做以下处理
就是 : 会自动把类加入到 transition组件下的根元素中,transition里面只能放单个标签( 组件 )
添加或者删除的class，常用的是如下六个
进入 ：
离开 :
2、Transition组件中使用transition
代码
123123123123
效果
说明
3、Transition组件中使用animation
代码
效果
4、Transition组件的type属性
发生在 : 当我们同时使用transition和animation的情况下
代码
效果
tip : Vue为了知道过渡的完成，内部是在监听transitionend和animationend
如果只使用了其中一个，Vue能自动识别类型和设置监听
但如果同时使用，可能会出现问题：
- 可能某一个动画执行结束，另外一个动画还没有结束 ( 时间设置的不一样 )
解决方案
- 设置type属性为transition和animation来明确指定告知vue监听的类型，以哪个时间为准
123123123123
题外话 ：其实一般设置一样的时间，而且，有动画了为啥要设置过渡呢，是个神奇的属性～
5、Transition组件的duration属性( 用的比较少 )
基本设置 : 同时设置进入和离开的时间
123123123123
一旦这么使用了，css中设置的 transitionend和animationend的时间就无效了，以duration时间为准
对象设置 : 分别设置进入和离开的时间
123123123123
6、 Transition组件的mode属性
如果transition组件中包裹的是两个元素( 组件 )，相互显示，就会发生很丑的事情
代码
onetwo
效果
缘由和解决
原因 : 因为默认情况下，进入和离开动画，是同时发生的
解决 : 设置mode属性
onetwo
mode : in-out
mode : out-in
7、 Transition组件的appear属性
如果想要一刷新页面就展示动画，需加上
onetwo
8、 Transition组件的回调函数
one
:css="false". 会让Vue跳过css检测，提高性能，同时防止过渡过程中受css样式的影响
- before-enter : 动画进入之前触发 ---- from，初始化操作
- enter : 动画正在进入时触发 ---- active，写js,执行具体的动画
- after-enter : 动画进入之后触发 ---- to，结束，收尾工作
- enter-cancelled : 动画进入失败触发
- before-leave : 动画离开之前触发
- leave : 动画正在离开时触发
- after-leave : 动画离开之后触发
- leave-cancelled : 动画离开失败触发
el : 执行动画的那个元素
done : 当使用javaScript来执行过渡动画时，需要进行done回调，否则它们将会被同步调用，过渡会立刻完成
接下来使用其他封装好的第三方动画库啦～
二、使用animate.css第三方动画库
Animate.css | A cross-browser library of CSS animations.
1.安装
npm install animate.css2.导入
在main.js中进行导入
import 'animate.css'
3.使用
01-在css中使用
代码
one
效果
说明
02-使用class类名
这里需使用enter-active-class 和 leave-active-class，css部分可以不写啦
代码
可以不用写name了，如果写了class类名，类名的优先级会更高
one
效果
说明
三、使用gsap库 ( JS库 )
GreenSock - Docs - Gsap
某些情况下，如果希望通过JavaScript来实现动画效果，那么可以使用gsap库来完成
- GSAP : The GreenSock Animation Platform ( GreenSock动画平台 ) 的缩写
- 可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且兼容浏览器
1.安装
npm install gsap 2.导入
在组件内部导入即可
import gsap from 'gsap'3.使用
需要使用enter和leave回调函数
one
4.效果
5.gsap额外补充 ( 数字变化效果 )
代码
{{ showNumber.toFixed(0) }}
效果
四、列表的过渡 transition-group
在上面的文章中，过渡动画只是针对单个元素或者单个组件的，如果希望渲染的是一个列表，并且该列表中添加、删除数据也希望有动画执行
使用 transition-group :
1.列表数字增加删除效果
01-代码
{{ item }}
效果
02.效果优化
优化点 : 新增和删除的节点是有动画，但是对于其他需要移动的节点是没有动画的
可以通过新增的v-move的class来完成动画，它会在元素改变位置的过程中应用
css代码
效果
03.增加洗牌效果
one-安装lodash库
npm install lodashtwo-导入
import _ from 'lodash'three-使用
{{ item }}
fore-效果
2.列表的交替动画效果
01-用css实现
代码
{{ item }} 效果
ps : 那么是同时消失，同时出现，实现不了交替效果
02-使用js实现动画
通过delay属性，实现交替效果
代码
{{ item }} 效果
五、写在最后
🌟 🌟 谢谢聪明美丽帅气的你看到我的文章，支持一下可否
👍 👍 您的点赞，就是我动力的源泉，让我跨过彼岸
⭐️ ⭐️ 您的收藏，就是我期待的远方，让我目标坚定
✏️ ✏️ 您的评论，就是我心灵的医生，让我完善己身
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！