【无标题】

快到碗里来

vue过渡动画

css：

<style>
    /* .v-leave ,
    .v-leave-to
    ,
    .v-leave-active*/
    #app {
        height: 800px;
        width: 1200px;
        margin: auto;
    }

    #app div {
        height: 30px;
        width: 40px;
        border-radius: 15px;
        background-color: yellow;
    }

    .v-leave {
        transform: translateX(0px);
        transform: translateY(0px);
    }

    .v-leave-to {
        transform: translate(200px, 600px);
    }

    .v-enter {
        transform: translateX(0px);
        transform: translateY(0px);
    }

    .v-enter-to {
        transform: translate(200px, 600px);

    }

    .v-enter-active,
    .v-leave-active {
        transition: all 1s;
    }
</style>

html：

<div id="app">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition>
            <div v-if="show">hello</div>
        </transition>

    </div>

js：

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            show: true,
        },
        methods: {

        },
    });
</script>