zoukankan html css js c++ java

vue 使用Animate.css库

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Vue中的动画</title>    
 6         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
 7     </head>
 8     <body>    
 9         <div id="app">
10             <transition 
11                 name="fade"
12                 enter-active-class="animated swing"
13                 leave-active-class="animated shake">
14                 <div v-if="show">hello world</div>
15             </transition>
16             <button @click="handleBtnClick">change</button>
17         </div>
18         
19         
20         <!-- 开发环境版本，包含了用帮助的命令行警告 -->
21         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
22         <script type="text/javascript">
23             
24             var app = new Vue({
25                 el: '#app',
26                 data:　{
27                     show: true
28                 },
29                 methods: {
30                     handleBtnClick: function() {
31                         this.show = !this.show;
32                     }
33                 }
34             })
35             
36         </script>
37     </body>
38 </html>

引入animate.css文件

在tranisition标签里面添加enter-active-class，leave-active-class，这里面一定要添加animated这个类

查看全文

相关阅读:
封装
 魔术方法类与有关面向对象的关键字
 JS基础
 轮播效果
 进度条效果
 2018年6月
 2018年5月
 Monte Carlo tree search 学习
 2018年4月
 pachi 学习

原文地址：https://www.cnblogs.com/1032473245jing/p/9041441.html