transición transición de múltiples elementos

Una pluralidad de elementos de transición (tecla de ajuste)
* Cuando los elementos de conmutación del mismo nombre de la etiqueta, para definir un valores de variables únicas por las características clave los distinguen para permitir Vue, Vue o sólo para sustituir el contenido de la eficiencia interna de la misma etiqueta.
modo: in-out; OUT- en

<!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

Publicado 20 artículos originales · ganado elogios 0 · Vistas 87

carta privada preocupaciones

transición transición de múltiples elementos

Supongo que te gusta