<!-- bower-> （前端）包管理器 npm install bower -g 验证: bower --version bower install <包名> bower uninstall <包名> bower info <包名> 查看包版本信息 <script src="bower_components/vue/dist/vue.js"></script> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <style> #div1{ width:100px; height:100px; background: red; } .fade-transition{ //整体动画 transition: 1s all ease; } .fade-enter{ //进入： opacity: 0; } .fade-leave{ //离开： opacity: 0; transform: translateX(200px); //右边飞 } </style> </head> <body> <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="bSign" transition="fade"></div> <!--transition="fade" 固定写法：动画名称--> </div> <script> new Vue({ el:'#box', data:{ bSign:true }, methods:{ /*toggle:function(){ alert(1); }*/ toggle(){//es6语法，等价上面写法， this.bSign=!this.bSign; } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <link rel="stylesheet" href="bower_components/animate.css/animate.css"> <!-- animate.css动画库 --> <style> #box{ width:400px; margin: 0 auto; } #div1{ width:100px; height:100px; background: red; } </style> </head> <body> <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" class="animated" v-show="bSign" transition="bounce"></div> </div> <script> new Vue({ el:'#box', data:{ bSign:true }, methods:{ toggle(){ this.bSign=!this.bSign; } }, transitions:{ //定义所有动画名称 bounce:{//动画名称 transition="bounce" enterClass:'zoomInLeft', leaveClass:'zoomOutRight' } } }); </script> </body> </html>