transition与animation如何在vue中使用

本篇文章给大家分享的是有关transition与animation如何在vue中使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

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

transition在w3school的实例：

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

animation在w3school的实例：

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

animation使用@keyframes规定动画

@keyframes animationname {  keyframes-selector {   css-styles;  } } //必需。定义动画的名称。 animationname //必需。动画时长的百分比。 //合法的值： //0-100% //from（与 0% 相同） //to（与 100% 相同） keyframes-selector //必需。一个或多个合法的 CSS 样式属性。 css-styles

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

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

npm install animate.css –save

2.全局引用一下animation动画库

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

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

<div class="rotateIn"   style="animation-duration:2s;    animation-delay:1s;    animation-iteration-count:1;    animation-fill-mode:both;"> </div> <div class="fadeInLeft"   style="opacity:0;    animation-duration:3s;    animation-delay:2s;    animation-iteration-count:1;    animation-fill-mode:both;"> </div> <div class="fadeInUp"   style="opacity:0;    animation-duration:3s;    animation-delay:3s;    animation-iteration-count:1;    animation-fill-mode:both;"> </div>

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

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

/*v是默认的，在transition中定义name属性  <transition name=fade>  v-enter-from就要改成fade-enter-from */ <transition>  <div>hello world</div>  </transition>  //使用transition标签时，直接在css中控制  /*元素进入前效果*/  .v-enter-from{  opacity: 0;  }  /*元素进入时效果*/  .v-enter-active{  /*使用定义的动画*/   animation: shake 0.3s;  } /*元素进入后效果*/ .v-enter-to{   opacity: 1;  } /*元素离开前效果*/  .v-leave-from{   opacity: 1;  } /*元素离开时效果*/  .v-leave-active{ /*使用定义的动画*/   animation: shake 0.3s;  }  /*元素离开后效果*/  .v-leave-to{   opacity: 0;  }  /*定义一个动画效果*/  @keyframes shake {   0%{    transform: translateX(-100px);  }   50%{   transform: translateX(-50px);  }  0%{    transform: translateX(50px);  }  }

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

<transition  transition :duration="{enter:1500,leave:600}"  enter-from-class="animated"  enter-active-class="animated"  enter-to-class="animated"  leave-from-class="animated fadeOut"  leave-active-class="animated fadeOut"  leave-to-class="animated fadeOut"  v-on:before-enter="beforeEnter" 　　v-on:enter="enter" 　　v-on:after-enter="afterEnter" 　　v-on:enter-cancelled="enterCancelled" 　　v-on:before-leave="beforeLeave" 　　v-on:leave="leave" 　　v-on:after-leave="afterLeave" 　　v-on:leave-cancelled="leaveCancelled"  mode="out-in" appear > /*enter-from-class就是v-enter-from元素进入前  animated就是使用animation动画库，fadeOut就是动画效果  */  /*before-enter这些就是钩子函数，是滑动进入状态  mode="out-in"是设定动画是先入后出，还是先出后入  appear 是设置加载时就要开始动画  */ // 进入中 //动画进入前 // -------- beforeEnter: function (el) {  //el就是dom元素  // ... }, // 此回调函数是可选项的设置 // 与 CSS 结合时使用 //动画进入时 enter: function (el, done) {  // ...  done() }, //动画进入后 afterEnter: function (el) {  // ... }, //动画进入完成 enterCancelled: function (el) {  // ... }, // -------- // 离开时 // -------- beforeLeave: function (el) {  // ... }, // 此回调函数是可选项的设置 // 与 CSS 结合时使用 leave: function (el, done) {  // ...  done() }, afterLeave: function (el) {  // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) {  // ... }

下面是animation常用的动画效果

fade: {  title: '淡入淡出',  fadeIn: '淡入',  fadeInDown: '向下淡入',  fadeInDownBig: '向下快速淡入',  fadeInLeft: '向右淡入',  fadeInLeftBig: '向右快速淡入',  fadeInRight: '向左淡入',  fadeInRightBig: '向左快速淡入',  fadeInUp: '向上淡入',  fadeInUpBig: '向上快速淡入',  fadeOut: '淡出',  fadeOutDown: '向下淡出',  fadeOutDownBig: '向下快速淡出',  fadeOutLeft: '向左淡出',  fadeOutLeftBig: '向左快速淡出',  adeOutRight: '向右淡出',  fadeOutRightBig: '向右快速淡出',  fadeOutUp: '向上淡出',  fadeOutUpBig: '向上快速淡出' }, bounce: {  title: '弹跳类',  bounceIn: '弹跳进入',  bounceInDown: '向下弹跳进入',  bounceInLeft: '向右弹跳进入',  bounceInRight: '向左弹跳进入',  bounceInUp: '向上弹跳进入',  bounceOut: '弹跳退出',  bounceOutDown: '向下弹跳退出',  bounceOutLeft: '向左弹跳退出',  bounceOutRight: '向右弹跳退出',  bounceOutUp: '向上弹跳退出' }, zoom: {  title: '缩放类',  zoomIn: '放大进入',  zoomInDown: '向下放大进入',  zoomInLeft: '向右放大进入',  zoomInRight: '向左放大进入',  zoomInUp: '向上放大进入',  zoomOut: '缩小退出',  zoomOutDown: '向下缩小退出',  zoomOutLeft: '向左缩小退出',  zoomOutRight: '向右缩小退出',  zoomOutUp: '向上缩小退出' }, rotate: {  title: '旋转类',  rotateIn: '顺时针旋转进入',  rotateInDownLeft: '从左往下旋入',  rotateInDownRight: '从右往下旋入',  rotateInUpLeft: '从左往上旋入',  rotateInUpRight: '从右往上旋入',  rotateOut: '顺时针旋转退出',  rotateOutDownLeft: '向左下旋出',  rotateOutDownRight: '向右下旋出',  rotateOutUpLeft: '向左上旋出',  rotateOutUpRight: '向右上旋出' }, flip: {  title: '翻转类',  flipInX: '水平翻转进入',  flipInY: '垂直翻转进入',  flipOutX: '水平翻转退出',  flipOutY: '垂直翻转退出' }, strong: {  title: '强调类',  bounce: '弹跳',  flash: '闪烁',  pulse: '脉冲',  rubberBand: '橡皮筋',  shake: '左右弱晃动',  swing: '上下摆动',  tada: '缩放摆动',  wobble: '左右强晃动',  jello: '拉伸抖动' }

以上就是transition与animation如何在vue中使用，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。