終於不再對transition和animation,傻傻分不清楚了 --vue中使用transition和animation

一生無過發表於2020-12-11

以前寫頁面注重在功能上,對於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

  1. 第一步就是要安裝依賴,只安裝animation動畫庫,transiton是直接可以使用的標籤,不用去下載依賴
    npm install animate.css –save
  2. 全域性引用一下animation動畫庫
    1 import animate from 'animate.css'
    2 Vue.use(animate); 
  3. 簡單使用一下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>
  4. 正式使用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肯定能增加使用者體驗感,做出一些高大上的網頁。

 

     

 

相關文章