<!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"> * * the last one, delete v-enter-active , the Enter-to-v * second frame deleted v-enter, add Enter-to-V (. 1) * first frame of v-enter, v-enter-active * Display: / * * Hidden: * first frame of Leave-V (. 1), V-Leave-Active * second frame deleted v-leave, Leave-to-add V * last one, delete v-leave-active, v to--leave * / .v-Enter, .v-to-Leave { Opacity: 0; } .v-Active-Enter, .v-Leave-Active { Transition: Opacity 2S; } </ style > </ head > < body > < div ID = "the 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>