9.vue-transition 過渡動畫

1、
transition：vue中得一個內置組件
實現得是組件得過渡效果
實現上：直接添加css得類名、使用鈎子函數實現

2、

使用步驟：
用transition組件，把想要實現過渡效果得元素包裹起來
寫上對應得實現過渡效果得css即可

3、t

ransition實現原理：
      1、會自動探查包裹得元素是否有css得動畫或過渡效果，有得話會自動添加或刪除css得類名
      2、是否有鈎子函數，有得話在指定得時間調用鈎子函數
      3、都沒有，直接執行

4、

每一個transition組件都有一個name屬性，這個name屬性，是用來告訴瀏覽器哪一個transition組件需要加上指定得過度效果
<transition name="test"></transition>
.test-enter：開始進去狀態
.test-enter-active：整個運行得狀態
.test-leave：離開開始狀態
.test-leave-active：整個運行得狀態
.test-leave-to：整個運行狀態得（更強調得是結束狀態）
.test-enter-to：整個運行得狀態（更強調得是結束狀態）
.test-move：移動得時候設置得
不需要使用類名得時候name屬性就可以不加

5、

使用鈎子函數：
before-enter
enter
after-enter
enter-cancelled
before-leave
leave
after-leave
leave-cancelled
如果使用得是鈎子函數得方式實現得過渡，那么這些鈎子函數給transition加

5、在使用transition得時候如果想要遍歷得列表，那么要把transition改成transition-group
tag屬性：代表得是包裹所有元素得最外層元素

 

例：

<template>
  <div id='app'>
       <!-- <button type="button" @click="toggle">按鈕</button> -->
       <!-- <transition name="fadeA">
              <div id="div1" v-show="isShow"></div>
       </transition> -->
       <button type="button" @click="toggle">按鈕</button>
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
        @before-leave="beforeLeave">
              <div id="div1" v-show="isShow"></div>
       </transition>
   
  </div>
</template>

<script>
import $ from "jquery"
export default {
  name: 'App',
  data(){
    return {
        isShow: false
    }
  },
  methods: {
    toggle () {
      this.isShow = !this.isShow
    },
    beforeEnter (el) {            // 這是使用鈎子函數
      console.log ("開始進入")
       el.style.opacity = 0
    },
    enter (el,done) {  //done 是否要向下繼續執行，如果沒有自動向下。
      console.log ("進入")
      el.style.opacity =0.5
      setTimeout(function(){
        done()
      },5000)
    },
    afterEnter (el) {
       console.log ("進入之后")
      el.style.opacity = 1
    },
    beforeLeave(el){
         console.log ("離開之前")
         el.style.opacity = 1
    }
  }
  
  

}

</script>

<style>
#app{
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.test{
  color:skyblue;
}
#div1{
  width: 100px;
  height: 100px;
  background: #666;
}
/* .fadeA-enter,.fadeA-leave-active{       //這是使用class類
  margin-left:100px ;
  opacity: 0;
}
.fadeA-enter-to,.fadeA-leave{
  margin-left:0px ;
  opacity: 1;
}
.fadeA-enter-active,.fadeA-leave-active{
  transition: 3s;
} */
</style>