如果我们手动一个个来编写这些动画,那么效率是比较低的,所以在开发中我们可能会引用一些第三方库的动画库, 比如animate.css。官网:https://animate.style/
什么是animate.css呢?
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
Animate.css是一个已经准备好的、跨平台的动画库为我们的web项目,对于强调、主页、滑动、注意力引导 非常有用;
如何使用Animate库呢?
第一步:需要安装animate.css库;
第二步:导入animate.css库的样式;
第三步:使用animation动画或者animate提供的类;
1. 自定义过渡class
我们可以通过以下 attribute 来自定义过渡类名:
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css. 结合使用十 分有用。
2. animate.css库的使用
安装animate.css:
npm install animate.css
在main.js中导入animate.css:
import "animate.css"
接下来在使用的时候我们有两种用法:
用法一:直接使用animate库中定义的 keyframes 动画;
用法二:直接使用animate库提供给我们的类;
去animate官网https://animate.style/复制要使用的动画,reverse为反转动画
.why-enter-active {
animation: bounceInUp 1s ease-in;
}
.why-leave-active {
animation: bounceInUp 1s ease-in reverse;
}
二、认识gsap库
某些情况下我们希望通过JavaScript来实现一些动画的效果,这个时候我们可以选择使用gsap库来完成。
什么是gsap呢?
GSAP是The GreenSock Animation Platform(GreenSock动画平台)的缩写;
它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画,并且是浏览器兼容的;
这个库应该如何使用呢?
第一步:需要安装gsap库;
npm install gsap
第二步:导入gsap库;
在使用gsap的vue页面添加:import gsap from 'gsap';
第三步:使用对应的api即可;
JavaScript钩子
在使用动画之前,我们先来看一下transition组件给我们提供的JavaScript钩子,这些钩子可以帮助我们监听动画执行到 什么阶段了
当我们使用JavaScript来执行过渡动画时,需要进行 done 回调,否则它们将会被同步调用,过渡会立即完成。
添加 :css="false",也会让 Vue 会跳过 CSS 的检测,除了性能略高之外,这可以避免过渡过程中 CSS 规则的影响。(使用javascript动画时 一般添加)
那么接下来我们就可以结合gsap库来完成动画效果:
案例
1. gsap实现数字变化
官方给的例子带计算属性
也可以不用计算属性