vue学习22：动画原理

图1;

图2：

代码

<style>
        .fade-enter {
            opacity: 0;
        }
        .fade-enter-active {
            transition: opacity 3s;
        }
        .fade-leave-to {
            opacity: 0;
        }
        .fade-leave-active {
            transition: opacity 3s;
        }
    </style>

<div id="app">
            <transition name="fade">
                <div v-if="show">Hello World</div>
            </transition>
            <button @click="handleClick">按钮</button>
        </div>

另外，v-if和v-show效果都可以实现。