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

以前写页面注重在功能上，对于transition和animation是只闻其声，不见其人，对于页面动画效果心理一直痒痒的。最近做活动页面，要求页面比较酷炫，终于有机会认真了解了。

transition:英文过渡的意思，作用是过渡效果；animation:英文活泼、生气、激励，动画片就是animation film,作用是动画效果。

transition在w3school的实例：

 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

animation在w3school的实例：

 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

animation使用@keyframes规定动画

 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

以上是transition和animation的基础知识，最项目使用vue这样主流框架，就用vue使用下transition和animation

第一步就是要安装依赖,只安装animation动画库，transiton是直接可以使用的标签，不用去下载依赖
```
npm install animate.css –save
```

全局引用一下animation动画库

1 import animate from 'animate.css'

2 Vue.use(animate);

简单使用一下animation动画库，只要在class加上规定的动画效果名称就可以

 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>

正式使用transiton和animation,把知识进阶一下，使用transition标签

1、使用基础的transiton和animation动画

 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  }

2、使用trnasition标签的属性,结合animation的动画库

 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 }

下面是animation常用的动画效果

 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 }

结尾，学习用些transition和animation肯定能增加用户体验感，做出一些高大上的网页。

巴特西

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

最新文章

热门文章