以前寫頁面注重在功能上，對於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肯定能增加使用者體驗感，做出一些高大上的網頁。