1、动画的基础实现
transition 内置组件实现【单个元素或者单个组件】
1.1、给单个元素添加动画
1.2、给单个组件添加动画 跟1.1 一样,用transition包裹就行
1.3、下列情形可以给任何元素和组件添加进入、离开过度:
- 条件渲染
- 动态组件
- 组件根节点
1.4、面试可能会问动画原理:
1.5、常用的6个类名 ,transition 没有定义name ,默认是v-开头,如果定义了name,就是 name- 开头
1.6、动画示意图【执行原理】
2、animation动画
3、同时设置transition 和 animation
需要设置type属性来让vue决定动画根据 transition 还是 animation 来决定动画结束【谁的时间长,写谁】
一般定义的动画和过度时间一样长
或者只用animation 再来定义两个帧的动画,然后就不使用transition 过度了
:duration 显示的指定动画时间 【duration可以定义两种数据类型】
Numer类型:同时设置进入和离开的过渡时间
Object类型:分别设置进入和离开的过渡时间
4、过渡的模式 mode 【用的比较多】
in-out 先进入,后离开,进入结束才执行离开
out-in 先离开,才进入,离开结束才执行进入
5、初始显示时添加动画效果
6、结合第三方库实现动画 animate.css【css的动画库】
animate.css对强调,主页,滑动的注意力引导非常有用
6.1 使用animate.css
安装:npm install animate.css
引入:在main.js中import 'animate.css'
使用:将动画名称写入css 或者添加到transition 的 class
7、gsap 第三方库 js 的动画库
css 动画库比较不灵活,固定值比较方便,但是值变化的话,可以使用js库
7.1 使用步骤
安装: npm install gsap
导入: 在用到的组件中 import gsap from 'gsap'
使用对应的api: 配合 transition 提供的 js 勾子 一般使用enter和leave勾子
7.2、了解transition组件给我们提供的js钩子,可以帮助我们监听动画执行到哪个阶段了
下面是对照表:
完整写法:
8、jsap 实现数字变化效果【常见的动画效果】
9、transition-group 【渲染列表】
需要用why-move 给需要移动的其他节点设置一个位移的动画,具体位移多少,由vue来决定
10、gasp案例
<template>
<div>
<input type="text" v-model = "msg">
<transition-group
tag = "ul"
@before-enter = "beforeEnter"
@enter = "enter"
@Leave = "leave"
:css = "false">
<li
v-for = "(item,index) in showList"
:key = "index"
:data-index = "index"
>{
{item}}</li>
</transition-group>
</div>
</template>
<script>
import gsap from "gsap"
export default {
computed:{
showList(){
return this.list.filter(item=>{
return item.indexOf(this.msg) != -1;
})
}
},
data(){
return {
msg:"",
list:["abc","wshia","bxixi","hah","dfd"]
}
},
methods:{
beforeEnter(el){
el.style.opacity = 0;
el.style.height = 0;
},
enter(el,done){
console.log(el.dataset,el.dataset.index)
gsap.to(el,{
opacity:1,
height:"1.5rem",
onComplete:done,
delay:0.05 * el.dataset.index,
duration:1
})
},
leave(el,done){
gsap.to(el,{
opacity:0,
height:0,
duration:1,
onComplete:done,
delay:0.05 * el.dataset.index,//小技巧:el.dataset可以获取到上面元素里绑定的属性
})
}
}
}
</script>
<style scoped>
</style>