vue中显示或者暗藏DOM时，提供多种不同的形式来实现动画成果，能够配合应用css3动画，也能够应用第三方动画库，如animate.css。这里咱们应用vue提供的 transition 组件。
<!DOCTYPE HTML><html> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"> <script type="text/javascript" src="js/vue.min.js"></script> <style> .popBackground{ width: 300px; height: 200px; background: rgba(0,0,0,0.4); color: #01FEFE; } .fade-enter-active, .fade-leave-active { transition: opacity .8s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> </head> <body> <div id="box"> <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <div v-show="show" class="popBackground"> hello </div> </transition> </div> </div> <script> var box = new Vue({ el: '#box', data () { return { show: true } } }) </script> </body></html>