今天学习了vue过渡和animate.css结合使用，所以，添加一点小笔记。
01 | <!DOCTYPE html> |
02 | <html lang="en"> |
03 | <head> |
04 | <meta charset="UTF-8"> |
05 | <title>动画</title> |
06 | <script type="text/javascript" src="vue.js"></script> |
07 | <link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" > |
08 | <style type="text/css"> |
09 | p { |
10 | width: 300px; |
11 | height: 300px; |
12 | background: red; |
13 | margin: 10px auto; |
14 | } |
15 | </style> |
16 | <script type="text/javascript"> |
17 | window.onload = function(){ |
18 | var app = new Vue({ |
19 | el:'#box', |
20 | data:{ |
21 | show:false |
22 | } |
23 | }) |
24 | } |
25 | </script> |
26 | </head> |
27 | <body> |
28 | <div id="box"> |
29 | <!-- 控制数据的值切换显示隐藏 --> |
30 | <button @click="show=!show">transition</button> |
31 | |
32 | <!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> |
33 | <p v-show="show" class="animated"></p> |
34 | </transition> --> |
35 |
36 | <!-- 第二种方法 --> |
37 | <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> |
38 | <p v-show="show"></p> |
39 | </transition> --> |
40 |
41 | <!-- 多元素运动 --> |
42 | <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> |
43 | <p v-show="show" class="animated" :key="1"></p> |
44 | <p v-show="show" class="animated" :key="2"></p> |
45 | </transition-group> |
46 | </div> |
47 | </body> |
48 | </html> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。