终于不再对transition和animation,傻傻分不清楚了 --vue中使用transition和animation

 1 //将鼠标悬停在一个 div 元素上，逐步改变表格的宽度从 100px 到 300px：
 2 div
 3 {
 4     width:100px;
 5     transition: width 2s;
 6     -webkit-transition: width 2s; /* Safari */
 7 }
 8 div:hover {width:300px;}
 9 
10 //transition 属性是一个简写属性，用于设置四个过渡属性：
11 
12 //指定CSS属性的name，transition效果
13 transition-property     
14 //transition效果需要指定多少秒或毫秒才能完成
15 transition-duration
16 //指定transition效果的转速曲线
17 transition-timing-function
18 //定义transition效果开始的时候
19 transition-delay

 1 //使用简写属性，将动画与 div 元素绑定
 2 div
 3 {
 4 animation:mymove 5s infinite;
 5 -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
 6 }
 7 //animation 属性是一个简写属性，用于设置六个动画属性：
 8 //规定需要绑定到选择器的 keyframe 名称。。
 9 animation-name
10 //规定完成动画所花费的时间，以秒或毫秒计。
11 animation-duration
12 //规定动画的速度曲线。
13 animation-timing-function
14 //规定在动画开始之前的延迟。
15 animation-delay
16 //规定动画应该播放的次数。
17 animation-iteration-count
18 //规定是否应该轮流反向播放动画。
19 animation-direction

 1 @keyframes animationname {
 2     keyframes-selector {
 3         css-styles;
 4     }
 5 }    
 6 //必需。定义动画的名称。
 7 animationname
 8 //必需。动画时长的百分比。
 9 //合法的值：
10 //0-100%
11 //from（与 0% 相同）
12 //to（与 100% 相同）
13 keyframes-selector
14 //必需。一个或多个合法的 CSS 样式属性。
15 css-styles

 npm install animate.css –save

1 import animate from 'animate.css'
2 Vue.use(animate); 

 1 <div class="rotateIn" 
 2      style="animation-duration:2s;
 3             animation-delay:1s;
 4             animation-iteration-count:1;
 5             animation-fill-mode:both;">
 6 </div>
 7 <div class="fadeInLeft" 
 8      style="opacity:0;
 9             animation-duration:3s;
10             animation-delay:2s;
11             animation-iteration-count:1;
12             animation-fill-mode:both;">
13 </div>
14 <div class="fadeInUp" 
15      style="opacity:0;
16             animation-duration:3s;
17             animation-delay:3s;
18             animation-iteration-count:1;
19             animation-fill-mode:both;">
20 </div>   
 

1 /*v是默认的，在transition中定义name属性
 2     <transition name=fade>
 3     v-enter-from就要改成fade-enter-from
 4 */
 5 <transition>
 6    <div>hello world</div>
 7  </transition>
 8  //使用transition标签时，直接在css中控制
 9  /*元素进入前效果*/
10  .v-enter-from{
11     opacity: 0;
12  }
13  /*元素进入时效果*/
14  .v-enter-active{
15  /*使用定义的动画*/
16      animation: shake 0.3s;
17  }
18 /*元素进入后效果*/
19 .v-enter-to{
20      opacity: 1;
21  }
22 /*元素离开前效果*/
23  .v-leave-from{
24      opacity: 1;
25  }
26 /*元素离开时效果*/
27  .v-leave-active{
28 /*使用定义的动画*/
29      animation: shake 0.3s;
30  }
31  /*元素离开后效果*/
32  .v-leave-to{
33      opacity: 0;
34  }
35  /*定义一个动画效果*/
36  @keyframes shake {
37      0%{
38          transform: translateX(-100px);
39     }
40      50%{
41         transform: translateX(-50px);
42     }
43     0%{
44          transform: translateX(50px);
45     }
46  }

 1 <transition
 2     transition :duration="{enter:1500,leave:600}"
 3     enter-from-class="animated"
 4     enter-active-class="animated"
 5     enter-to-class="animated"
 6     leave-from-class="animated fadeOut"
 7     leave-active-class="animated fadeOut"
 8     leave-to-class="animated fadeOut"
 9     v-on:before-enter="beforeEnter"
10 　　v-on:enter="enter"
11 　　v-on:after-enter="afterEnter"
12 　　v-on:enter-cancelled="enterCancelled"
13 　　v-on:before-leave="beforeLeave"
14 　　v-on:leave="leave"
15 　　v-on:after-leave="afterLeave"
16 　　v-on:leave-cancelled="leaveCancelled"
17     mode="out-in" appear
18 >
19 /*enter-from-class就是v-enter-from元素进入前
20     animated就是使用animation动画库，fadeOut就是动画效果 
21  */
22  /*before-enter这些就是钩子函数，是滑动进入状态
23     mode="out-in"是设定动画是先入后出，还是先出后入
24     appear 是设置加载时就要开始动画
25  */
26 // 进入中
27 //动画进入前
28 // --------
29 beforeEnter: function (el) {
30     //el就是dom元素
31     // ...
32 },
33 // 此回调函数是可选项的设置
34 // 与 CSS 结合时使用
35 //动画进入时
36 enter: function (el, done) {
37     // ...
38     done()
39 },
40 //动画进入后
41 afterEnter: function (el) {
42     // ...
43 },
44 //动画进入完成
45 enterCancelled: function (el) {
46     // ...
47 },
48 // --------
49 // 离开时
50 // --------
51 beforeLeave: function (el) {
52     // ...
53 },
54 // 此回调函数是可选项的设置
55 // 与 CSS 结合时使用
56 leave: function (el, done) {
57     // ...
58     done()
59 },
60 afterLeave: function (el) {
61     // ...
62 },
63 // leaveCancelled 只用于 v-show 中
64 leaveCancelled: function (el) {
65     // ...
66 }

 1 fade: {
 2     title: '淡入淡出',
 3     fadeIn: '淡入',
 4     fadeInDown: '向下淡入',
 5     fadeInDownBig: '向下快速淡入',
 6     fadeInLeft: '向右淡入',
 7     fadeInLeftBig: '向右快速淡入',
 8     fadeInRight: '向左淡入',
 9     fadeInRightBig: '向左快速淡入',
10     fadeInUp: '向上淡入',
11     fadeInUpBig: '向上快速淡入',
12     fadeOut: '淡出',
13     fadeOutDown: '向下淡出',
14     fadeOutDownBig: '向下快速淡出',
15     fadeOutLeft: '向左淡出',
16     fadeOutLeftBig: '向左快速淡出',
17     adeOutRight: '向右淡出',
18     fadeOutRightBig: '向右快速淡出',
19     fadeOutUp: '向上淡出',
20     fadeOutUpBig: '向上快速淡出'
21 },
22 bounce: {
23     title: '弹跳类',
24     bounceIn: '弹跳进入',
25     bounceInDown: '向下弹跳进入',
26     bounceInLeft: '向右弹跳进入',
27     bounceInRight: '向左弹跳进入',
28     bounceInUp: '向上弹跳进入',
29     bounceOut: '弹跳退出',
30     bounceOutDown: '向下弹跳退出',
31     bounceOutLeft: '向左弹跳退出',
32     bounceOutRight: '向右弹跳退出',
33     bounceOutUp: '向上弹跳退出'
34 },
35 zoom: {
36     title: '缩放类',
37     zoomIn: '放大进入',
38     zoomInDown: '向下放大进入',
39     zoomInLeft: '向右放大进入',
40     zoomInRight: '向左放大进入',
41     zoomInUp: '向上放大进入',
42     zoomOut: '缩小退出',
43     zoomOutDown: '向下缩小退出',
44     zoomOutLeft: '向左缩小退出',
45     zoomOutRight: '向右缩小退出',
46     zoomOutUp: '向上缩小退出'
47 },
48 rotate: {
49     title: '旋转类',
50     rotateIn: '顺时针旋转进入',
51     rotateInDownLeft: '从左往下旋入',
52     rotateInDownRight: '从右往下旋入',
53     rotateInUpLeft: '从左往上旋入',
54     rotateInUpRight: '从右往上旋入',
55     rotateOut: '顺时针旋转退出',
56     rotateOutDownLeft: '向左下旋出',
57     rotateOutDownRight: '向右下旋出',
58     rotateOutUpLeft: '向左上旋出',
59     rotateOutUpRight: '向右上旋出'
60 },
61 flip: {
62     title: '翻转类',
63     flipInX: '水平翻转进入',
64     flipInY: '垂直翻转进入',
65     flipOutX: '水平翻转退出',
66     flipOutY: '垂直翻转退出'
67 },
68 strong: {
69     title: '强调类',
70     bounce: '弹跳',
71     flash: '闪烁',
72     pulse: '脉冲',
73     rubberBand: '橡皮筋',
74     shake: '左右弱晃动',
75     swing: '上下摆动',
76     tada: '缩放摆动',
77     wobble: '左右强晃动',
78     jello: '拉伸抖动'
79 }