Vue中過度動畫效果應用

一、實現動畫過渡效果的幾種方式

實現動畫必須要將要進行動畫的元素利用<transition>標籤進行包裹

1、利用CSS樣式實現過渡效果

v-enter: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。
v-enter-active: 定義過渡的狀態。在元素整個過渡過程中作用，在元素被插入時生效，在 transition/animation 完成之後移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。
v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入一幀後生效（於此同時 v-enter 被刪除），在 transition/animation 完成之後移除。
v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。
v-leave-active: 定義過渡的狀態。在元素整個過渡過程中作用，在離開過渡被觸發後立即生效，在 transition/animation 完成之後移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。
v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發一幀後生效（於此同時 v-leave 被刪除），在 transition/animation 完成之後移除

（1）通過name的名稱進行重命名，在樣式文件中進行.fade-enter-active設置動畫的效果即transition屬性，需要注意的是動畫結束後樣式將會移除，所以如果想要動畫實現之後元素保持有某個樣式，則需要transition標籤裏面的元素的樣式表中進行設置，此情況是針對需要通過改變元素的屬性來顯示元素，如定位top，left以及通過transform將顯示的元素的位置改變從而讓元素出現在當前的視圖窗口中時，但是如果元素v-show爲true之後元素已經在視圖中央顯示了，不需要位置的移動將元素移動到視圖中，只是想要顯示的時候顯示有動畫效果的，則直接將動畫結束的屬性設置在v-enter-active/v-leave-active中即可。也就是說動畫的屬性如果只是產生效果，不對元素的任何屬性進行修改，也就是動畫中的屬性樣式不需要永久添加到dom元素中，則直接按後者的方式定義，如果說動畫的屬性同時相對元素進行樣式設計，屬性樣式需要被添加到dom元素上，則需要按照前者的方式。

<transition name="fold">
        <div class="shopcart-list" v-show="listShow">
          <div class="list-header">
            <h1 class="title">購物車</h1>
            <span class="empty" @click="empty">清空</span>
          </div>
          <div class="list-content" ref="list">
            <ul>
              <li class="food border-1px" v-for="(food,index) in selectFoods" v-show="food.count>0">
                <span class="name">{{selectName[index]}}</span>
                <div class="price">
                  <span>￥{{food.price*food.count}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <v-cartcontrol :food="food"></v-cartcontrol>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>


 .fold-enter-active,.fold-leave-active
      transition:all 0.5s
    .fold-enter,.fold-leave
      transform :translate3d(0,0,0)
    .shopcart-list
      position:absolute
      transform:translate3d(0,-100%,0)//動畫結束後的效果需要在此處進行設置，設置在.fold-enter-active中，元素動畫結束後該樣式屬性會被移除掉，將會看不到想要的效果
      top: 100%//元素即使顯示也不再視圖窗口中，通過transform實現顯示
      z-index:-1
      width:100%

（2）如果要設置元素出現和隱藏的動畫效果不一樣則可以分別設置樣式

HTML

<transition name="bounce">
  <div v-show="showFlag" class="food"><div>
</transition>

css

.bounce-enter-active
    transition:all 0.4s linear
    transform:translate3d(0,0,0)
  .bounce-enter
    transform :translate3d(100%,0,0)
  .bounce-leave-active
    transition:all 0.4s linear
    transform:translate3d(100%,0,0)
  .bounce-leave
    transform:translate3d(0,0,0)

利用動畫animation也可以實現上面的效果

.bounce-enter-active
    animation :bounceIn 0.4s linear
    @keyframes bounceIn{
      0%{
        transform :translate3d(100%,0,0)
      }
       50%{
         transform :translate3d(50%,0,0)
       }
         100%{
           transform :translate3d(0,0,0)
         }
    }
  .bounce-leave-active
    animation :bounceOut 0.4s linear
    @keyframes bounceOut{
      0%{
        transform :translate3d(0,0,0)
      }
       50%{
         transform :translate3d(50%,0,0)
       }
         100%{
           transform :translate3d(100%,0,0)
         }
    }

2、利用animation或者是動畫庫實現動畫效果
<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Look at me!</p>
  </transition>
</div>
new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})

.bounce-enter-active {
  animation: bounce-in 0.5s linear;//leave和enter的動畫效果不一樣
}
.bounce-leave-active {
  animation: bounce-out 0.5s linear;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}

3、自定義過度類名

enter-class
enter-active-class
enter-to-class (>= 2.1.8 only)
leave-class
leave-active-class
leave-to-class (>= 2.1.8 only)

他們的優先級高於普通的類名，這對於 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。

<link href="https://unpkg.com/[email protected]/animate.min.css" rel="stylesheet" type="text/css">
<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#example-3',
  data: {
    show: true
  }
})

可以在樣式中同時使用transition和animation

4、利用JavaScript鉤子函數實現過渡效果

<transition
  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"
>
  <!-- ... -->
</transition>


methods: {
  // --------
  // 進入中
  // --------
  beforeEnter: function (el) {
    // ...
  },
  // 此回調函數是可選項的設置
  // 與 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) {
    // ...
  }
}

在使用鉤子函數實現動畫的時候注意dom的異步刷新，需要結合this.$nextTick()，同時在leave和enter中設置樣式前最好迫使dom進行迴流（reflow）使dom重新渲染，如獲取元素的offsetHeight等，然後在this.$nextTick（）中設置新的樣式，不然有可能實現不了動畫的效果.

Vue中過度動畫效果應用

DAPPER 事務 TRANSACTION

Java中線程的創建方式

CSS樣式部分總結

vue-cli項目中使用mui配置（自測成功）

swiper自動無限輪播（複習01）

webpack安裝

Vue路由基礎

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結