Vue中动画自定义前缀

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的动画实现</title>
    <script src="../../vue/vue-v2.6.11.js"></script>
    <style>
        /*动画进入之前和离开之后的样式*/
        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }
        /* 动画进入时间段和离开时间段的样式 */
        .v-enter-active, .v-leave-active {
            transition: all 1s ease;
        }

        /*动画进入之前和离开之后的样式*/
        .second-enter, .second-leave-to {
            opacity: 0;
            transform: translateY(100px);
        }

        /* 动画进入时间段和离开时间段的样式 */
        .second-enter-active, .second-leave-active {
            transition: all 1s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="点我" @click="flag = !flag">
    <transition>
        <h2 v-if="flag">这是Vue实现的动画</h2>
    </transition>

    <hr/>

    <input type="button" value="点我2" @click="flag2 = !flag2">
    
    <transition name="second">
        <h2 v-if="flag2">这是Vue实现的动画</h2>
    </transition>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data: {
            flag: false,
            flag2: false
        }
    });
</script>
</html>
发布了62 篇原创文章 · 获赞 0 · 访问量 1247

猜你喜欢

转载自blog.csdn.net/weixin_45616246/article/details/105419646