Vue动画实现
2021-07-15 本文已影响0人
大佬教我写程序
单个元素使用内置组件transition(添加和删除的时候)
- 原理：
-
嗅探是否用了CSS过度或动画，若有，那就在恰当时机添加删除CSS类名
-
若transition组件提供JS钩子函数，这些钩子函数会在恰当时机调用
-
若没js和CSS，DOM插入和删除会立即执行
-
实现方法
如果没有name属性，那就是v-enter-from
image.png
-
关于动画类何时删除（最好还是让时间一样）
image.png
组件之间的动画
image.png
animate.css第三方库
-
下载
npm install animate.css -
引入
image.png
-
使用
image.png
-
优先级： 在animate里面的类的执行优先级高于用name属性实时的类
image.png
transition提供的钩子函数
image.png
gsap库（js实现动画）
- 可以通过js为css属性，SVG，Canvas等设置动画，浏览器兼容
- 下载
npm install gsap -
引入 &&使用
image.png
gsap小案例，数字增加动画
image.png
渲染一个列表
- 用transition-group标签
<transition-group tag="span" name="gqb">
<span v-for="value in numbers" :key="value">{{value}}</span>
</transition-group>
- 动画属性
.gqb-enter-from,
.gqb-leave-to {
opacity: 0;
transform: translateY(30px);
}
.gqb-enter-to,
.gqb-leave-from {
opacity: 1;
transform: translateY(0);
}
.gqb-enter-active,
.gqb-leave-active {
transition: all 1s ease;
}
.gqb-leave-active{
position: absolute;
}
.gqb-move {
transition: transform 1s ease;
}
-
input动画
image.png
<template>
<div>
<input v-model="keyvalue">
<transition-group tag="ul" name="gqb" :css="false"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<li v-for="(value,index) in showNumber" :key="value" :data-index="index">{{value}}</li>
</transition-group>
</div>
</template>
<script>
import gsap from "gsap"
export default {
data(){
return{
numbers:['abf','gsv','rfs','abg','mma','hga','nnb'],
keyvalue:""
}
},
methods:{
beforeEnter(el){
el.style.opacity=0;
el.style.hight=0;
},
enter(el,done){
gsap.to(el,{
opacity:1,
height:"1.5em",
delay:el.dataset.index * 0.5,
onComplete:done
})
},
leave(el,done){
gsap.to(el, {
opacity:0,
height:0,
delay:el.dataset.index * 0.2,
onComplete:done
})
}
},
computed:{
showNumber(){
return this.numbers.filter(item=>{return item.indexOf(this.keyvalue)!==-1})
}
}
}
</script>
<style scoped>
</style>
