學習筆記03--Vue動畫

學習筆記03–Vue動畫

一個動畫過程：四個時間點和兩個時間段
v-enter-active(v-enter-------->v-enter-to)進入過渡
v-leave-active(v-leave-------->v-leave-to)離開過渡

• v-enter：是一個時間點，進入之前，元素的起始狀態，此時還沒有進入動畫
• v-leave-to：是一個時間點，動畫離開之後的終止狀態，此時動畫已經結束了
• v-enter-active 入場動畫的時間段
• v-leave-active 離場動畫的時間段

1、使用過渡類名
例子需求： 點擊按鈕，讓 h3 顯示，再點擊，讓 h3 隱藏
html結構：

<style>
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(200px);
    }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s ease;
    }
</style>

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- transition 元素，是 Vue 官方提供的，包裹需要被動畫控制的元素 -->
    <transition>
      <h3 v-if="flag">這是一個H3</h3>
    </transition>
  </div>

vm實例：

var vm = new Vue({
  el: '#app',
  data: {
    isshow: false
  },
   methods: {}
 });
 

2、自定義v-前綴
給transition定義一個name，下面相當於將v-替換成my

<transition name="my">
   <h3 v-if="flag">這是一個h3</h3>
</transition>
 

3、鉤子函數實現半場動畫（有去無回）
小球半場運動的例子：
html結構：

 <transition
      @before-enter="beforeEnter"  //這幾個函數也相當於動畫的生命週期函數，更多詳情可以參考官方vue文檔
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>

vm實例：

var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
       beforeEnter(el){ //動畫入場前調用
          el.style.transform = "translate(0,0)" //設置小球初始位置
          },
       enter(el, done){  
          el.offsetWidth   //這句代碼是保證動畫有刷新,沒有實際作用
          el.style.transform = "translate(150px, 400px)"
          el.style.transition = "all 0.8s ease"
          done()  //相當於調用afterEnter函數
         },
      afterEnter(el){ //動畫完成之後調用
          this.flag = false
          }
        }
      });
      

注意：動畫鉤子函數的第一個參數el：表示要執行動畫的dom元素，是一個原生js dom對象，即可以認爲el是通過document.getElementById(’’)方式獲取原生js dom對象的

4、多個元素實現動畫
(1)使用transition-group元素實現列表動畫
在實現列表過渡的時候，如果需要過渡的元素是通過v-for循環渲染出來的，則不能使用transition包裹，需要使用transition-group包裹
例：
html結構：

<style>
  .v-enter,
  .v-leave-to {
      opacity: 0;
      transform: translateY(100px);
    }
  .v-enter-active,
  .v-leave-active {
      transition: all 0.6s ease;
    }
</style>

<div id="app">
 <div>
   <label>
     Id:
     <input type="text" v-model ="id">
   </label>
   <label>
     Name:
     <input type="text" v-model ="name">
   </label>
   <input type="button" value="添加" @click="add">
 </div>
 <transition-group appear tag = "ul">
         <li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}}--------{{item.name}}
    </li>
    </transition-group>

vm實例：

var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          {id: 1, name: '張三'},
          {id: 2, name: '李四'},
          {id: 3, name: '王五'}
        ]
      },
 methods: {
        add() {
          this.list.push({id: this.id, name: this.name})
          this.id = this.name = ''
        },
        del(i) {
          this.list.splice(i, 1)
        }
    }
 })

**注意：**如果要爲v-for循環渲染出來的元素設置動畫，需要給每個元素加:key屬性

(2)實現列表刪除和刪除動畫(v-move 和v-leave-active結合使用，能夠實現列表中被刪除元素後面的元素漸漸向上的效果)

<style>
.v-move {
   transition: all 0.5s ease;
}
.v-leave-active {
   position: absolute;
}
</style>

(3)給transition-group添加appear屬性，實現頁面入場效果

通過 爲 transition-group 元素，設置 tag 屬性，指定 transition-group 渲染爲ul元素，如果不指定 tag 屬性，默認渲染爲 span 標籤

<transition-group appear tag="ul">
    <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
      {{item.id}} --- {{item.name}}
    </li>
  </transition-group>