单动画过度 · vue

参考官方： https://cn.vuejs.org/v2/guide/transitions.html ``` <transition name="fade"> </transition> ``` # 代码案例： ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { //系统提供的 opacity: 0; } </style> </head> <body> <div id="app"> <button type="button" @click="isShow=!isShow">点击</button> //系统提供的 <transition name="fade"> <p v-show="isShow">hello vue</p> </transition> </div> </body> </html> <script src="vue/vue.js"></script> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ isShow:true } }) </script> ~~~