<!DOCTYPE html> <html>
<head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/animate.css" /> </head>
<body> <div class="asd">
<div v-bind:class="{ bounceInUp: qwe,animated:qwe}">asdas</div> <!--添加class--> <button v-on:click="dj">点击动画 </button> <!--添加点击事件--> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '.asd', data:{qwe: false}, methods: { dj: function() { this.qwe =! this.qwe; // 我已经已经在前边定义了data:{qwe: false},此时qwe是false, // 当我点击按钮式qwe的值就是(=!) {qwe: ture} // 再点击{qwe: false},以此进行class的添加与删除
} }
}) </script>
</html>
此为两个按钮的vue动画
<!DOCTYPE html> <html>
<head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/animate.css" /> <style type="text/css"> .div { width: 200px; height: 200px; background: blue; transition: height 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } .divv { width: 400px; height: 400px; background: blue; } </style> </head>
<body> <div class="asd"> <button v-on:click="dj">购买</button> <div class="animated div bounceInLeft" v-bind:class="{bounceInLeft:eqw,bounceInRight:qwe,div:ewq,divv:qwe}"></div> <!--添加class--> <span v-on:click="gb">x</span> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '.asd', data: { qwe: true, ewq: false },
methods: { dj: function() { this.eqw = true, this.qwe = false
},
gb: function() { this.eqw = false, this.qwe = true } }
}) </script>
</html>
