<! DOCTYPE HTML > < HTML lang = "EN" > < head > < Meta charset = "UTF-. 8" > < title > CSS Principles of Animation </ title > < Script the src = "../ JS / vue.js" > </ Script > <-! official website: HTTPS: //cn.vuejs.org/v2/guide/transitions.html#CSS-%E5%8A%A8%E7%94%BB -> < style > . the enter-Fade, / * into the beginning of the transition state * / .Leave-to-Fade { / * away from the transition to the end state* / Opacity : 0 ; } .fade-Active-Enter, / * enter commencement state transition * / .fade-Leave-Active { / * leave commencement state transition * / Transition : Opacity .5s ; } . Slide Enter-Active--fade { / * set the duration and animation functions * / Transition : All .3s EASE ; } . Slide-Fade-Leave-Active { Transition : All-.8s Cubic Bezier (1.0,0.5,0.8,1.0 ) ; } .slide-fade-enter,.slide-fade-leave-to{ transform: translateX(10px); opacity: 0; } </style> </head> <body> <div id="app"> <button @click="btnClick">change</button> <transition name="fade"> <div v-if="show">hello</div> </transition> <hr> <transition name="slide-fade"> <div v-if="show">hello</div> </transition> </div> <script> vm = new Vue({ el: '#app', data: { show:true }, methods:{ btnClick:function () { this.show = !this.show } } }) </script> </body> </html>