Vue過渡效果之CSS過渡

前面的話

　　Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果。本文將從CSS過渡transition、CSS動畫animation及配合使用第三方CSS動畫庫(如animate.css)這三方面來詳細介紹Vue過渡效果之CSS過渡

 

引入

　　以一個toggle按鈕控制p元素顯隱爲例，若是不使用過渡效果，則以下所示

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>
  <p v-if="show">小火柴的藍色理想</p>
</div>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>

　　若是要爲此加入過渡效果，則須要使用過渡組件transition

 

過渡組件

　　Vue提供了transition的封裝組件，下面代碼中，該過渡組件的名稱爲'fade'

  <transition name="fade">
    <p v-if="show">小火柴的藍色理想</p>
  </transition>

　　當插入或刪除包含在transition組件中的元素時，Vue會自動嗅探目標元素是否應用了 CSS 過渡或動畫，若是是，在恰當的時機添加/刪除 CSS 類名

 

過渡類名

　　總共有6個(CSS)類名在enter/leave的過渡中切換

【v-enter】

　　定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除

【v-enter-active】

　　定義過渡的狀態。在元素整個過渡過程當中做用，在元素被插入時生效，在 transition 或 animation 完成以後移除。 這個類能夠被用來定義過渡的過程時間，延遲和曲線函數

【v-enter-to】

　　定義進入過渡的結束狀態。在元素被插入一幀後生效(與此同時 v-enter 被刪除)，在  transition 或 animation 完成以後移除

【v-leave】

　　定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除

【v-leave-active】

　　定義過渡的狀態。在元素整個過渡過程當中做用，在離開過渡被觸發後當即生效，在 transition 或 animation 完成以後移除。 這個類能夠被用來定義過渡的過程時間，延遲和曲線函數

【v-leave-to】

　　定義離開過渡的結束狀態。在離開過渡被觸發一幀後生效(與此同時 v-leave 被刪除)，在 transition 或 animation 完成以後移除

　　對於這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴，表示過渡組件的名稱。好比，若是使用 <transition name="my-transition"> ，則 v-enter替換爲 my-transition-enter

 

transition

　　經常使用的Vue過渡效果都是使用CSS過渡transition，下面增長一個enter時透明度變化，leave時位移變化的效果

<style>
.fade-enter{
  opacity:0;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  transition:transform .5s;
}
.fade-leave-to{
  transform:translateX(10px);
}
</style>

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>    
  <transition name="fade">
    <p v-if="show">小火柴的藍色理想</p>
  </transition>
</div>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>

 

animation

　　CSS動畫animation用法同CSS過渡transition，區別是在動畫中 v-enter 類名在節點插入 DOM 後不會當即刪除，而是在 animationend 事件觸發時刪除

　　下面例子中，在元素enter和leave時都增長縮放scale效果

<style>
.bounce-enter-active{
  animation:bounce-in .5s;
}
.bounce-leave-active{
  animation:bounce-in .5s reverse;
}
@keyframes bounce-in{
  0%{transform:scale(0);}
  50%{transform:scale(1.5);}
  100%{transform:scale(1);}
}
</style>

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>    
  <transition name="bounce">
    <p v-if="show">小火柴的藍色理想</p>
  </transition>
</div>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>

 

同時使用

　　Vue 爲了知道過渡的完成，必須設置相應的事件監聽器。它能夠是 transitionend 或 animationend ，這取決於給元素應用的 CSS 規則。若是使用其中任何一種，Vue 能自動識別類型並設置監聽。

　　可是，在一些場景中，須要給同一個元素同時設置兩種過渡動效，好比 animation 很快的被觸發並完成了，而 transition 效果還沒結束。在這種狀況中，就須要使用 type 特性並設置 animation 或 transition 來明確聲明須要 Vue 監聽的類型

<style>
.fade-enter,.fade-leave-to{
  opacity:0;
}
.fade-enter-active,.fade-leave-active{
  transition:opacity 1s;
  animation:bounce-in 5s;
}
@keyframes bounce-in{
  0%{transform:scale(0);}
  50%{transform:scale(1.5);}
  100%{transform:scale(1);}
}
</style>

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>    
  <transition name="fade" type="transition">
    <p v-if="show">小火柴的藍色理想</p>
  </transition>
</div>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true,
  },
})
</script>

 

自定義類名

　　能夠經過如下特性來自定義過渡類名

enter-class
enter-active-class
enter-to-class 
leave-class
leave-active-class
leave-to-class 

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

<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">

<div id="example">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition  name="xxx" enter-active-class="animated tada"  leave-active-class="animated bounceOutRight">
    <p v-if="show">小火柴的藍色理想</p>
  </transition>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#example',
  data: {
    show: true
  }
})
</script>

 

初始渲染過渡

　　能夠經過 appear 特性設置節點的在初始渲染的過渡

<transition appear>
  <!-- ... -->
</transition>

　　這裏默認和進入和離開過渡同樣，一樣也能夠自定義 CSS 類名

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" 
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

　　下面是一個例子

<style>
.custom-appear-class{
  opacity:0;
  background-color:pink;
  transform:translateX(100px);
}  
.custom-appear-active-class{
  transition: 2s;
}
</style>

<div id="demo">
  <button @click="reset">還原</button>
  <transition appear   appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" 
  appear-active-class="custom-appear-active-class">
    <p>小火柴的藍色理想</p>
  </transition>
</div>

<script>
new Vue({
  el: '#demo',
  methods:{
    reset(){
      history.go();
    }
  }
})
</script>

 

過渡時間

　　在不少狀況下，Vue能夠自動得出過渡效果的完成時機。默認狀況下，Vue會等待其在過渡效果的根元素的第一個 transitionend 或 animationend 事件。然而也能夠不這樣設定——好比，能夠擁有一個精心編排的一序列過渡效果，其中一些嵌套的內部元素相比於過渡效果的根元素有延遲的或更長的過渡效果

　　在這種狀況下能夠用<transition>組件上的duration屬性定製一個顯性的過渡效果持續時間 (以毫秒計)

　　下面的代碼意味着元素在進入enter和離開leave時，持續時間都爲1s，而不管在樣式中它們的設置值爲多少

<transition :duration="1000">...</transition>

　　也能夠分別定製進入和移出的持續時間

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

　　好比，下面的代碼中，進入和移出的效果都爲animate.css裏面的shake效果，但持續時間分別是0.5s和1s

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>    
  <transition  :duration="{ enter: 500, leave: 1000 }" name="xxx" enter-active-class="animated shake"  leave-active-class="animated shake">
    <p v-if="show">小火柴的藍色理想</p>
  </transition>
</div>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>

 

過渡條件

　　通常地，在Vue中知足下列任意一個過渡條件，便可添加過渡效果

【條件渲染(使用v-if)】

　　常見的條件是使用條件渲染，使用v-if

<style>
.fade-enter,.fade-leave-to{
  opacity:0;
}
.fade-enter-active,.fade-leave-active{
  transition:opacity 1s;
}
</style>

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>    
  <transition name="fade">
    <p v-if="show">小火柴的藍色理想</p>
  </transition>
</div>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>

【條件展現(使用v-show)】 

　　使用條件展現，即便用v-show時，也能夠添加過渡效果

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>    
  <transition name="fade">
    <p v-show="show">小火柴的藍色理想</p>
  </transition>
</div>

【動態組件】

　　使用is屬性實現的動態組件，能夠添加過渡效果

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>    
  <transition name="fade">
    <component :is="view"></component>
  </transition>
</div>

<script>
new Vue({
  el: '#demo',
  components:{
    'home':{template:'<div>小火柴的藍色理想</div>'}
  },
  data: {
    show: true,
  },
  computed:{
    view(){
      return this.show ? 'home' : '';
    }
  }
})
</script>