Vue中添加過渡效果的方法

更新時間：2017年03月16日 10:21:31 作者：HNS

本篇文章主要介紹了Vue中添加過渡效果的方法，Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果，有興趣的同學(xué)可以了解一下。

關(guān)于vue的過渡效果，vue官方給的概述是這樣的。

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果。

包括以下工具：

1、在 CSS 過渡和動畫中自動應(yīng)用 class

2、可以配合使用第三方 CSS 動畫庫，如 Animate.css

3、在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM

4、可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

其中里面也給出了許多的例子，但是例子給到了“多個元素過渡”的時候，就沒有案例的代碼了，在這里對vue官方文檔的這部分案例做一部分補(bǔ)充。

以下我的代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="../js/vue.js" charset="utf-8"></script>
 <title>過渡效果-多個元素的過渡</title>
 <style>
  /*淡入淡出按鈕,這個使得按鈕的效果很差*/
  /*在 “on” 按鈕和 “off” 按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另一個開始進(jìn)入過渡。這是 <transition> 的默認(rèn)行為 - 進(jìn)入和離開同時發(fā)生。*/
  .fade-enter-active,.fade-leave-active{
   transition: all .5s
  }
  .fade-enter,.fade-leave-active{
   opacity: 0
  }
  /*淡入淡出+絕對定位*/
  #app2{
   position: relative;
   height: 100px;
   width: 100px;
   background:green;
  }
  #app2 button{
   position: absolute;
   left:50%;
   top: 50%;
  }
  .fade-abosolute-enter,.fade-abosolute-leave-active{
   opacity: 0
  }
  .fade-abosolute-enter-active,.fade-abosolute-leave-active{
   transition: all 1s
  }
  /*淡入淡出+絕對定位+滑動效果*/
  /*這三種效果合在一起，產(chǎn)生的效果是比較好的*/
  #app3{
   width: 200px;
   height: 100px;
   background: rgb(26, 46, 224);
   position: relative;
  }
  #app3 button{
   position: absolute;
   left: 50%;
   top: 50%;
  }
  .fade-slide-enter-active,.fade-slide-leave-active{
   transition: all 1s
  }
  .fade-slide-enter{
   opacity: 0;
   transform: translateX(30px);
  }
  .fade-slide-leave-active{
   opacity: 0;
   transform: translateX(-30px);
  }
  #app4{
   position: relative;
   width: 200px;
   height: 100px;
   background: rgb(8, 201, 80);
  }
  #app4 button{
   position: absolute;
   left: 50%;
   top: 50%;
  }
  .fade-slide-mode-enter-active,.fade-slide-mode-leave-active{
   transition: all .5s
  }
  .fade-slide-mode-enter{
   opacity: 0;
   transform: translateX(30px);
  }
  .fade-slide-mode-leave-active{
   opacity: 0;
   transform: translateX(-30px);
  }
 </style>
</head>
<body>
  <!--  淡入淡出按鈕,這個使得按鈕的效果很差 -->
 <div id="app1">
  <!-- 這個淡出淡出效果，在原本沒加上過渡模式的時候效果非常糟糕，在加入了mode="out-in"之后，效果比較好，out-in指的是先過渡現(xiàn)有的元素，在過渡新元素 -->
  <transition name="fade" mode="out-in">
    <button v-if="isEditing" key="save" @click="isEditing = !isEditing">
     save
    </button>
    <button v-else key="edit" @click="isEditing = !isEditing">
     Edit
    </button>
  </transition>
 </div>
 <!-- 淡入淡出+絕對定位 -->
 <div id="app2">
  <transition name="fade-abosolute">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
 <!-- 淡入淡出+絕對定位+滑動 -->
 <div id="app3">
  <transition name="fade-slide">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
 <!-- in-out,out-in的過渡模式，同時生效的進(jìn)入和離開的過渡不能滿足所有要求，所以vue提供了過渡模式 -->
 <div id="app4">
  <transition name="fade-slide-mode" mode="in-out">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
</body>
<script type="text/javascript">
 var vm1 = new Vue({
  el:'#app1',
  data () {
   return{
    isEditing:true,
   }
  }
 })
 var vm2 = new Vue({
  el:'#app2',
  data () {
   return {
    on:true
   }
  }
 })
 var vm3 = new Vue({
  el:'#app3',
  data () {
   return {
    on:true
   }
  }
 })
 var vm4 = new Vue({
  el:'#app4',
  data () {
   return {
    on:true
   }
  }
 })
</script>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: