vue组件中使用<transition></transition>标签过渡动画

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <!--2. 自定义两组样式，来控制transition 内部的元素实现动画-->
    <style>
        /*v-enter 是进入之前，元素的起始状态*/
        /*v-leave-to 离开之后动画的终止状态*/
        .v-enter,.v-leave-to{
            opacity:  0;/*透明度*/
            transform: translateX(150px);
        }
         /*入场(离场)动画的时间段   */
        .v-enter-active,.v-leave-active{
            transition: all 0.8s ease;

        }


        .my-enter,.my-leave-to{
            opacity:  0;/*透明度*/
            transform: translateY(70px);
        }
        .my-enter-active,.my-leave-active{
            transition: all 0.8s ease;

        }
    </style>
</head>
<body>

    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <input type="button" value="toggle2" @click="flag2=!flag2">

        <!--1. 使用transition元素把需要被动画控制的元素，包裹起来-->
        <transition>
            <h3 v-if="flag">这是一个H3</h3>
        </transition>

        <transition  name="my">  <!--区分不同组织间动画-->
            <h6 v-if="flag2">这是一个H6</h6>
        </transition>
    </div>

<script>
    var vm = new Vue({
       el : '#app',
       data : {
           flag : false,
           flag2 : false,
       },
       methods : {

       },
    });

</script>
</body>
</html>

 

posted @ 2020-05-09 14:48  KG-work-space  阅读(10954)  评论(1)  编辑  收藏  举报