以前寫頁面注重在功能上，對於transition和animation是隻聞其聲，不見其人，對於頁面動畫效果心理一直癢癢的。最近做活動頁面，要求頁面比較酷炫，終於有機會認真瞭解了。

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,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中使用transition和animation的例項程式碼的文章就介紹到這了,更多相關vue使用transition和animation內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！