Vue动画实现

单个元素使用内置组件transition(添加和删除的时候)

• 原理：

1. 嗅探是否用了CSS过度或动画，若有，那就在恰当时机添加删除CSS类名

2. 若transition组件提供JS钩子函数，这些钩子函数会在恰当时机调用

3. 若没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>