05 vue3使用动画

在开发中我们一般会给组件添加一些动画增加用户体验

vue提供了内置组件transition

transition的基本使用

 Transition组件的原理

 过渡动画class

 通过animation来实现动画

前面我们是通过transition实现动画，我们也可以通过animation实现

 同时设置过渡和动画

 

 Vue为了知道过渡的完成，内部是在监听 transitionend 或 animationend，到底使用哪一个取决于元素应用的 CSS规则：

如果我们只是使用了其中的一个，那么Vue能自动识别类型并设置监听；

 但是如果我们同时使用了过渡和动画呢？

并且在这个情况下可能某一个动画执行结束时，另外一个动画还没有结束；

在这种情况下，我们可以设置 type 属性为 animation 或者 transition 来明确的告知Vue监听的类型；

 过度的模式mode

 动态组件的切换

 动态组件的切换同样适用

 appear初次渲染

首次渲染的时候是没有动画的，如果我们希望给他添加上去动画，可以增加另外一个属性 appear

 使用第三方库animate.css

Animate.css是一个已经准备好的、跨平台的动画库为我们的web项目，对于强调、主页、滑动、注意力引导 非常有用，意识就是不用考虑兼容性问题

1安装animate.css

npm install animate.css

2在main.js中导入animate.css：

 3使用

 官网：Animate.css | A cross-browser library of CSS animations.

使用第三方库gsap

某些情况下我们希望通过JavaScript来实现一些动画的效果，我们可以选择使用gsap库来完成。

GSAP是The GreenSock Animation Platform（GreenSock动画平台）的缩写；

它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的

安装：npm install gsap

JavaScript钩子

 gsap库的使用

 gsap实现数字变化

认识列表的过渡