Vue_动画

作用： 提高用户体验，更好理解页面中功能

vue把一个完整的动画拆分为入场动画和出场动画

入场动画包含：进入之前v-enter和进入之后v-enter-to

v-enter表示动画入场之前的起始状态

v-enter-to表示动画入场完成之后的终止状态

v-enter-active表示入场动画的时间段 规定动画的时长以及相关的动画效果

v-leave表示动画出场的开始状态

v-leave-to表示动画出场的结束状态

v-leave-active表示出场动画的时间段 规定动画的时长以及相关的动画效果

1.使用过渡类名

1）实现动画效果的元素需放在<transition>中

	<transition>
    	<h3 v-show="flag">这是一个要使用动画控制的元素</h3>
	</transition>

2）添加样式

    <style>
        .v-enter,
        .v-leave-to{
            opacity:0;
            transform: translateX(100px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 1s ease;
                   /*所有属性 1s 过渡效果*/
        }
        .v-enter-to,
        .v-leave{
            opacity: 0.5;
            transform: translateX((40px));
        }
    </style>

2.使用JS动画生命周期函数实现半场动画

1）将元素放入<transition>中，定义三个钩子函数

<div id="app">
	<input type="button" value="加入购物车" @click="flag=!flag">
	<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div id="ball" v-show="flag"></div>
     </transition>
</div>

2）定义三个方法

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag:false
            },
            methods:{
                beforeEnter(el){//小球开始动画之前的起始状态
                    el.style.transform = "translate(0,0)"
                },
                enter(el,done){//小球动画结束之后的结束状态 done表示afterEnter
                    el.offsetWidth //固定写法 否则无法实现动画效果 el.offsetHeight ..都可
                    el.style.transform = "translate(150px,300px)"
                    el.style.transition = "all 1s ease"
                    //动画实现完毕后会自动调用done()，done结束afterEnter的引用
                    done()
                },
                //所有属性 1s 过渡效果
                afterEnter(el){//小球动画结束之后的回调函数，做一些清理工作
                    this.flag = !this.flag;
                }
            }
        });
    </script>

3）添加样式

   <style>
        #ball{
            width:15px;
            height:15px;
            background-color: red;
            background: radious 50%;
        }
    </style>

3.v-for列表过渡

1）用transition-group组件把v-for循环的列表包裹起来

	<div id="app">

        Id:<input type="text" v-model="id">
        Name: <input type="text" v-model="name">
        <input type="button" value="添加" @click="add">

        <!-- 默认为span -->
        <!-- 在transion-group 使用v-for必须使用key -->
        <ul>
            <transition-group tag="ul">
                <li v-for="(item,i) in list" :key="item.id" @click="remove(i)">{{item.id}}-------{{item.name}}</li>
            </transition-group>
    </ul>
        
    </div>

注：<transition-group>默认为<span>标签 可使用tag="ul"

2）定义样式

    <style>
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        li{
            line-height: 30px;
            border: 1px dashed #ccc;
            margin: 5px;
            font-size: 12px;
            padding-left: 10px;
            width: 500px;
            cursor: pointer;
        }
        li:hover{
            background-color: orange;
            box-shadow: 0 0 7px gray;
            /* transition: all 0.6s ease; */
        }
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(200px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
        
        /*在transition-group组件中，以下两个结合使用，能够让列表的过渡更加平缓柔和*/
        .v-move{    /*让元素被改变定位时，有一个缓动效果*/
            transition: all 0.5s ease;
        }
        .v-leave-active{/*表示要被删除的那个元素   absolute脱离标准流不占位置*/
            position: absolute;
        }
    </style>

3）

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {id:1,name:"gaojun"},
                    {id:2,name:"fuge"},
                    {id:3,name:"yujie"},
                    {id:4,name:"binge"},
                ],
                id:"",
                name:""
            },
            methods:{
                remove(i){
                    this.list.splice(i,1)
                },
                add(){
                    const p ={id:this.id,name:this.name}
                    this.list.push(p)
                    this.id = this.name = ""
                }
            }
        });
    </script>