multi-element transition transition

A plurality of transition elements (setting key)
* When the switching elements of the same tag name, to set a unique tag values by key characteristics distinguish them to allow Vue, Vue or only to replace the contents of the internal efficiency of the same label.
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

Published 20 original articles · won praise 0 · Views 87

Private letter concerns

multi-element transition transition

Guess you like