今天学习了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 > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。