Vue——CSS過渡動畫原理

時間 2019-11-08

標籤 vue css 過渡動畫原理欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS過渡動畫效果</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style type="text/css">
            /*
             * 顯示：
             * 第一幀添加v-enter、v-enter-active
             * 第二幀刪掉v-enter，添加v-enter-to（1）
             * 最後一幀，刪掉v-enter-active、v-enter-to
             *
             * 隱藏：
             * 第一幀添加v-leave（1）、v-leave-active
             * 第二幀刪掉v-leave，添加v-leave-to
             * 最後一幀，刪掉v-leave-active、v-leave-to
             */
            .v-enter,
            .v-leave-to {
                opacity: 0;
            }
            .v-enter-active,
            .v-leave-active {
                transition: opacity 2s;
            }
        </style>
    </head>

    <body>
        <div id="root">
            <transition>
                <div v-show="show">Harold</div>
            </transition>
            <transition><div v-if="show">Harold</div></transition>
            <button @click="handleBtnClick">change</button>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#root',
                data: {
                    show: true
                },
                methods: {
                    handleBtnClick() {
                        this.show = !this.show
                    }
                }
            })
        </script>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。