Vue中实现过渡动画

Vue中实现过渡动画

1.如何给Vue控制的元素添加过渡动画
1.1将需要执行动画的元素放在transition组件中
1.2当transition组件中的元素显示时会自动查找.v-enter/.v-enter-active/.v-enter-to类名
当transition组件中的元素隐藏时会自动查找.v-leave/.v-leave-active/.v-leave-to类名
1.3我们只需要在.v-enter和.v-leave-to中指定动画开始的状态
在.v-enter-active和.v-leave-active中指定动画执行的状态
即课可完成过渡动画
注意点:
1.多个元素添加过渡动画
transition只能放一个元素,多个元素无效
如果想给多个元素添加过渡动画,那么就必须创建多个transition组件
2.初始动画设置
默认情况下第一次进入的时候没有动画
如果想一进来就有动画,我们可以通过给transition添加appear属性的方式
告诉Vue第一次进来就需要显示动画
3.如何给多个不同的元素指定不同的动画
如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式
来指定"进入之前/进入之后/进入过程中, 离开之前/离开之后/离开过程中"对应的类名
来实现不同的元素执行不同的过渡动画**

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
        .one-enter{
            opacity: 0;
        }
        .one-enter-to{
            opacity: 1;
            margin-left: 500px;
        }
        .one-enter-active{
            transition: all 3s;
        }

        .two-enter{
            opacity: 0;
        }
        .two-enter-to{
            opacity: 1;
            margin-top: 500px;
        }
        .two-enter-active{
            transition: all 3s;
        }

    </style>
  <div id="app">
    	<button @click="toggle">我是按钮</button>
    	<transition appear name="one">
       		 <div class="box" v-show="isShow"></div>
   		 </transition>
    	<transition appear name="two">
       		 <div class="box" v-show="isShow"></div>
   		 </transition>
</div>
    <script>
    //1.创建一个Vue的实例对象
    let vue = new Vue({
        //2.告诉Vue的实例对象,将来需要控制界面上的哪个区域
        el:'#app',
        //3.告诉Vue的实例对象,被控制区域的数据是什么
        data:{
            isShow:true
        },
        //专门用于存储监听事件回调函数
        methods:{
            toggle(){
                this.isShow = !this.isShow
            }
        },
        //专门用于定义计算属性的
        computed:{

        }
    });
</script>