vue中的动画

学习目标：

vue中的动画

---

学习内容：

1、 使用过度类名实现动画
2、 自定义v-前缀
3、 使用第三方animate
4、 使用钩子函数实现半场动画
5、使用transition-group实现列表动画
6、appear和tag的使用

---

学习产出：

1.使用过度类名实现动画

• v-enter
• v-enter-active
• v-enter-to
• v-leave
• v-leave-active
• v-leave-to

使用transition包裹控制元素

<transition>
            <h3 v-if="flag">出现</h3>
        </transition>

在样式里书写动画形式

 <style>
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateX(100px);
        }
        .v-enter-active,.v-leave-active{
            transition:all 1s ease;
        }
    </style>

2.自定义v-前缀

在transition元素里书写属性name=“名字”

<transition name="my">
            <h1 v-if="flag">h1</h1>
        </transition>

把v-样式改成指定前缀

 <style>
        .my-enter,.my-leave-to{
            opacity: 0;
            transform: translateY(50px);
        }
        .my-enter-active,.my-leave-active{
            transition:all 1s ease;
        }
    </style>

3.使用第三方animate

导入animate.css文件

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

在transition元素里书写enter-active-class和leave-active-class属性

<transition enter-active-class="bounceIn" leave-active-class="bounceInDown" :duration="{enter:200,leave:400}">
            <h2 v-if="flag" class="animated">h2</h2>
</transition>

4.使用钩子函数实现半场动画

在transition元素里书写@before-enter=“beforeEnter” @enter=“enter”@after-enter=“afterEnter”

 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div v-if="flag" class="box"></div>
</transition>

在methods实现事件函数

var vm=new Vue({
            el:'#app',
            data:{
                flag:false,
            },
            methods:{
                beforeEnter(el){
                    el.style.transform="translate(0,0)"
                },
                enter(el,done){
                    el.offsetTop
                    el.style.transform="translate(150px,450px)"
                    el.style.transition="all 1s ease"
                    done()
                },
                afterEnter(el){
                    this.flag=!this.flag
                },
            },
        })

5.使用transition-group实现列表动画

使用transition-group包裹控制元素

<transition-group appear tag="ul">
                <li v-for="(item,i) in site" :key="item.id" @click="del(i)">
                    {{ item.id }}----{{ item.name }}
                </li>
</transition-group>

在样式里书写动画

    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 1s ease;
        }
        .v-move{
            transition: all 1s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>

在methods书写指定事件函数

    <script >
        var vm=new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                site:[
                    {id:1,name:'孙悟空'},
                    {id:2,name:'猪八戒'},
                    {id:3,name:'沙悟净'},
                ]
            },
            methods:{
                add(){
                    this.site.push({id:this.id,name:this.name})
                    this.id=this.name=''
                },
                del(i){
                    this.site.splice(i,1)
                }
            },
        })
    </script>

注意：千万不要在上面的script标签里出现src属性，否则动画无效