Vue，动画使用第三方类实现动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script src="../js/vue.js"></script> <link rel="stylesheet" type="text/css" href="../css/animate.css"/> <style> /* 入场 bounceIn 离场 bounceOut */ </style> <body> <div id="app"> <!-- 1. 使用时需要添加 animated --> <!-- 1.1 在transition中添加 enter-active-class="animated bounceIn" --> <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut"> <!-- 需求: 点击按钮， 让 h3 显示， 再点击， 让 h3 隐藏 --> <h3 v-show="flag">这是一个h3</h3> </transition> <input type="button" value="toggle" @click="flag=!flag"> <!-- 1.2 在需要动画的标签中的class里添加 class="animated" --> <!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时间 --> <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200"> <!-- 需求: 点击按钮， 让 h4 显示， 再点击， 让 h 隐藏 --> <h4 v-show="flag" class="animated">这是一个h4</h4> </transition> <!-- 使用 :duration="{ enter:200, leave: 400 }" 来分别设置 入场的时长 和 离场的时长 --> <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter:200, leave: 400 }"> <!-- 需求: 点击按钮， 让 h4 显示， 再点击， 让 h 隐藏 --> <h5 v-show="flag" class="animated">这是一个h5</h5> </transition> </div> </body> </html> <script> var vm = new Vue({ el:'#app', data:{ flag: false }, methods:{ } }) </script>
引用 animate库 时， 使用的地方要加 animated（基本组件）