一、animate.css
1、什么是animate.css?
Animate.css是一个已经准备好的、跨平台的动画库为我们的web项目,对于强调、主页、滑动、注意力引导 非常有用
2、如何使用animate.css?
第一步:安装animate.css
方法:npm install animate.css
第二步:导入animate.css库
方法:import "animate.css"
注意:建议在main.js文件中导入
第三部:使用animation动画或者animate提供的类
animate.css官网:https://animate.style/
右侧就是animate.css为我们定义的动画名字
(1) 、animate.css第一种用法:
注意:需要结合transition这个内置组件使用
(2)、animate.css第二种用法
想添加哪个动画就点击右边的复制 就可以把这个动画的类名复制下来
注意:自定义class优先级更高
二、gsap库的使用
某些情况下我们希望通过JavaScript来实现一些动画的效果,这个时候我们可以选择使用gsap库来完成。
1、什么是gsap?
GSAP是The GreenSock Animation Platform(GreenSock动画平台)的缩写;
它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画,并且是浏览器兼容的;
2、如何使用gsap
第一步:安装gsap
方法:npm install gsap
JavaScript钩子
在使用动画之前,我们先来看一下transition组件给我们提供的JavaScript钩子,这些钩子可以帮助我们监听动画执行到
什么阶段了。
注意:这是transition组件为我们提供的javascript钩子,transition组件在帮我们执行动画的时候会执行这些钩子
第二步:引入gsap库
方法:import gsap from 'gsap’
第三部:使用对应的api
当我们使用JavaScript来执行过渡动画时,需要进行 done
回调,否则它们将会被同步调用,过渡会立即完成。所以onComplete:done必须写,onComplate:done的主要作用是告诉transition组件
当前这个动画执行完了
注意:添加 :css=“false”,也会让 Vue 会跳过 CSS 的检测,除了性能略高之外,这可以避免过渡过程中 CSS 规则的影响。
:css=“false” 可以让style中写的动画失效
gsap实现数字递增的效果(小案例)
上边这个小案例中的computed属性也可以不写 可以直接{{showNumber}} 这样直接展示showNumber
三、列表的过渡
注意:transition-group也是内置组件
1、列表过渡的基本使用
2、v-move
只要transition-group包裹的元素内容发生变化 都会添加v-move这个类名
2、打乱上边数字的顺序
首先引入一个库 lodash
安装:npm install lodash
引入:import _ from 'lodash’
四、列表的交错过渡案例