<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*显示/隐藏过渡效果*/ .xxx-enter-active, .xxx-leave-active { transition: opacity .5s; } /*隐藏时的样式*/ .xxx-enter, .xxx-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } /*********************************************************************************************/ /*显示过渡效果*/ .move-enter-active{ transition: all 1s; } /*隐藏过渡效果*/ .move-leave-active{ transition: all 3s; } /*隐藏时的样式*/ .move-enter, .move-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; transform: translateX(20px); } /*********************************************************************************************/ .xxxxx-enter-active { animation: bounce-in .5s; } .xxxxx-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } </style> </head> <body> <div id="app"> <button @click="IsShow = !IsShow">toggle</button> <transition name=‘xxx‘> <p v-show="IsShow">hello</p> </transition > </div> <div id="app2"> <button @click="IsShow = !IsShow">toggle</button> <transition name=‘move‘> <p v-show="IsShow">hello</p> </transition > </div> <div id="app3"> <button @click="IsShow = !IsShow">toggle</button> <br /> <transition name=‘xxxxx‘> <p v-show="IsShow" style="background: red;display: inline-block;">hello</p> </transition > </div> <script src="https://vuejs.org/js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:‘#app‘, data(){ return{ IsShow:true } } }) var app2 = new Vue({ el:‘#app2‘, data(){ return{ IsShow:true } } }) var app3 = new Vue({ el:‘#app3‘, data(){ return{ IsShow:true } } }) </script> </body> </html>
原文：https://www.cnblogs.com/lee-xingxing/p/11216610.html