transition多元素过渡

多个元素过渡(设置key)
*当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
mode:in-out ; out-in

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <style>
        .kerwin-enter-active,
        .kerwin-leave-active {
            transition: all .5s
        }

        .kerwin-enter,
        .kerwin-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }

        .bounce-enter-active {
            animation: bounce-in .5s;
        }

        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }

        @keyframes bounce-in {
            0% {
                transform: translateX(100px);
                opacity: 0;
            }
            100% {
                transform: translateX(0px);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <button @click="isShow= !isShow">click</button>

        <transition name="bounce" mode="out-in">
            <p v-if="isShow" key="1">11111111111</p>
            <div v-else>tramisu</div>
            <p v-else key="2">222222222</p>
        </transition>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                isShow: true
            }
        })
    </script>
</body>
</html>

@Tiramisu

发布了20 篇原创文章 · 获赞 0 · 访问量 87

私信关注

transition多元素过渡

猜你喜欢