简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

vue元素實作動畫過渡效果實例詳解

零下一度
發布： 2018-05-14 15:58:03
原創
3265 人瀏覽過

這篇文章主要介紹了vue元素實現動畫過渡效果，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

1 在vue 中，使用 <transition> 標籤包含著的單一子元素在使用v-show 或 v-if 切換顯示隱藏前，會先判斷是否有對應的 class 樣式能符合到該子元素上：

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  redv-leave { margin-top: 50px; }
  redv-leave-active { transition: all 3s;}
  redv-leave-to { margin-top: 100px; opacity: 0;}
  redv-enter { margin-top: 50px; }
  redv-enter-active { transition: all 3s;}
  redv-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<p id="app">
  <transition>
    <p class="red" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>
</script>
</body>
登入後複製

  1. v-leave 目前元素準備從顯示轉變成隱藏，在動畫開始前添加到元素上，動畫一旦開始會立即刪除；

  2. ##v- leave-active 在動畫過渡過程中，元素一直擁有該樣式，直到動畫結束則自動刪除，用於設定過渡的效果；

  3. v-leave-to 在動畫過渡過程中，元素一直擁有該樣式，直到動畫結束則自動刪除，用於設定動畫最終的效果；

事例中，當點擊button，p 並不會馬上display: none ， 而是先設定v-leave ，下一刻即刪除v-leave ，同時加入v-leave-active v-leave-to，當v-leave-active 中的過渡時間執行完成，則刪除v-leave-active v-leave-to，同時加入display: none。

  1. v-enter 當前元素準備從隱藏轉變成顯示，在動畫開始前添加到元素上，動畫一旦開始會立即刪除；

  2. v-enter-active 在動畫過渡過程中，元素一直擁有該樣式，直到動畫結束則自動刪除，用於設定過渡的效果；

  3. v-enter-to在動畫過渡過程中，元素一直擁有該樣式，直到動畫結束則自動刪除，用於設定動畫最終的效果；

事例中，當點擊button，p 馬上清除display : none， 然後設定v-enter ，下一刻即刪除v-enter ，同時加入v-enter-active v-enter-to，當v-enter-active 中的過渡時間執行完成，則刪除v-enter-active v-enter-to。

2 自訂動畫類別名稱：

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  redslide-leave { margin-top: 50px; }
  redslide-leave-active { transition: all 3s;}
  redslide-leave-to { margin-top: 100px; opacity: 0;}
  redslide-enter { margin-top: 50px; }
  redslide-enter-active { transition: all 3s;}
  redslide-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<p id="app">
  <transition name="slide">
    <p class="red" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>
登入後複製

此效果與上一例效果完全一致的，

transition 元素可以使用 name 屬性來指定使用的類別名稱前綴，從而代替v-字段，例如事例中的 name="slide" 使本來的 v-enter 變成了 slide-enter。

3 transition 與animation 同時使用時

<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
  0% {
    margin-left: 10px;
  }
  100% {
    margin-left: 100px;
  }
}
  red {background-color: red; width: 100px; height: 100px;}
  blue {background-color: blue; width: 100px; height: 100px;}
  v-leave { margin-top: 50px; }
  v-leave-active { transition: all 3s; animation: aslide 5s;}
  v-leave-to { margin-top: 100px;}
</style>
<body>
<p id="app">
  <transition type="transition" >
    <p class="red" v-show="show"></p>
  </transition>
  <br>
  <transition type="animation" >
    <p class="blue" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>
登入後複製

事例中，動畫同時指定了transition 和animation 動畫，transition 元素的type 屬性可以指定以哪種動畫的時間為元素的結束時間，如果不指定動畫監控的方式，則會以最長時間的為準。

4 javascript 監聽動畫

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  v-leave { margin-top: 50px; }
  v-leave-active { transition: all 3s;}
  v-leave-to { margin-top: 100px;}
</style>
<body>
<p id="app">
  <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"
    >
    <p class="red" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function() {
      thisshow = !thisshow; 
      consolelog(&#39;-----------click---------&#39;);
    },
    beforeEnter: function (el) {
      consolelog(&#39;beforeEnter:&#39;);
    },
    enter: function (el, done) {
      consolelog(&#39;enter:&#39;);
      // done()
    },
    afterEnter: function (el) {
      consolelog(&#39;afterEnter:&#39;);
    },
    enterCancelled: function (el) {
      consolelog(&#39;enterCancelled:&#39;);
    },
    beforeLeave: function (el) {
      consolelog(&#39;beforeLeave:&#39;);
    },
    leave: function (el, done) {
      consolelog(&#39;leave:&#39;);
      done()
    },
    afterLeave: function (el) {
      consolelog(&#39;afterLeave:&#39;);
    },
    leaveCancelled: function (el) {
      consolelog(&#39;leaveCancelled:&#39;);
    }
  }
});
</script>
登入後複製

  1. #一旦使用js 事件，原css 動畫轉換效果就會無效，官方建議在

    上設定v-bind:css="false" 可令vue 內部機制免去監測css 動畫事件回調，提高性能。

  2. enter 和leave 事件需手動呼叫done 方法，不然事件一直不會呼叫後續的after 事件，沒有呼叫after 事件但是又有其他事件開始了，則被視為動畫被cancel 了。


5 頁面初始化時的動畫：

<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
  0% {
    margin-left: 10px;
  }
  100% {
    margin-left: 100px;
  }
}
  red {background-color: red; width: 100px; height: 100px;}
  apper { margin-top: 50px; }
  apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;}
</style>
<body>
<p id="app">
  <transition
    appear 
    appear-class="apper" 
    appear-active-class="apper-active" 
    v-on:before-appear="customBeforeAppearHook"
    v-on:appear="customAppearHook"
    v-on:after-appear="customAfterAppearHook" >
    <p class="red" ></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function() {
      thisshow = !thisshow; 
      consolelog(&#39;-----------click---------&#39;);
    },
    customBeforeAppearHook: function (el) {
      consolelog(&#39;customBeforeAppearHook:&#39;);
    },
    customAppearHook: function (el) {
      consolelog(&#39;customAppearHook:&#39;);
      // done()
    },
    customAfterAppearHook: function (el) {
      consolelog(&#39;customAfterAppearHook:&#39;);
    }
  }
});
</script>
登入後複製

  1. #
    <script src="/public/javascripts/vuejs"></script>
<style>
  v-enter-active { transition: all 15s;}
  v-enter-to { margin-top: 100px;}
  v-leave-active { transition: all 15s;}
  v-leave-to { margin-top: 10px;}
</style>
<body>
<p id="app">
  <p class="show1">
    <transition>
      <button v-if="show1" @click="show1 = false">on</button>
      <button v-else @click="show1 = true">off</button>
    </transition>
  </p>
  <p class="show2">
    <transition>
      <button v-if="show2" key="on" @click="show2 = false">on</button>
      <button v-else key="off" @click="show2 = true">off</button>
    </transition>
  </p>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    show1: true,
    show2: true
  }
});
</script>
    登入後複製

  3. appear 屬性表示開啟初始化動畫，appear-class 屬性指定初始化前的樣式，appear-active-class 屬性指定初始化動畫過程的樣式；

transition 動畫無法在初始化動畫中起效，而animation 動畫則可以；

before-appear appear after-appear 是事件回調，看事例相當清晰。


6 動畫元素的 key ：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 5s;}
  v-enter-to { margin-left: 10px;}
  v-leave { margin-left: 10px;}
  v-leave-active { transition: all 5s;}
  v-leave-to { margin-left: 100px;}
</style>
<body>
<p id="app">
  <p class="default">
    <transition>
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
  <p class="inout">
    <transition mode="in-out">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
  <p class="outin">
    <transition mode="out-in">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  }
});
</script>
登入後複製
登入後複製

show1 為什麼沒有動畫效果呢？因為vue 會把切換中的兩個button 辨識成同一個元素，只是修改了button 中的不同內容，所以實際上頁面並沒​​有發生DOM 元素的切換；

###如果要讓vue明確辨識出這是2個不同的button 元素，則為每個元素指定不同的key 屬性的值。 ############7 元素切換的動畫模式：######
<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 5s;}
  v-enter-to { margin-left: 10px;}
  v-leave { margin-left: 10px;}
  v-leave-active { transition: all 5s;}
  v-leave-to { margin-left: 100px;}
</style>
<body>
<p id="app">
  <p class="default">
    <transition>
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
  <p class="inout">
    <transition mode="in-out">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
  <p class="outin">
    <transition mode="out-in">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  }
});
</script>
登入後複製
登入後複製


  1. transition 默认是同时执行2个元素的切换动画的，案例中红色的 off 按钮其实是会同时向左移动的，只是因为布局上没有脱离布局流，被 on 按钮顶住，无法移动；

  2. mode="in-out" 可以使切换元素先执行将要显示元素的动画，再执行将要隐藏元素的动画；

  3. mode="out-in" 可以使切换元素先执行将要隐藏元素的动画，再执行将要显示元素的动画；

8 多元素动画：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 2s;}
  v-enter-to { margin-left: 10px;}
</style>
<body>
<p id="app">
  <transition-group>
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <transition-group tag="ul">
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemspush(itemslength)">add</button>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    items: [0,1]
  }
});
</script>
登入後複製


  1. transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素，要想使用多个元素的动画，必须使用 transition-group；

  2. transition-group 默认会在 DOM 里渲染成 span 标签，可使用 tag="ul" 指定渲染成其他标签；

  3. transition-group 必须为每一个子元素指定 key；

8 多元素的位移动画：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-move { transition: all 1s; }
</style>
<body>
<p id="app">
  <transition-group tag="ul" >
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemsreverse()">reverse</button>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    items: [0,1,2,3]
  }
});
</script>
登入後複製


  1. transition-group 允许在每个元素移动时，添加 v-move 的样式，移动完成后自动清除该样式；

  2. transition 的属性， transition-group 都有，包括 name enter leave；

以上是vue元素實作動畫過渡效果實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
動畫 效果 過渡
來源：php.cn
上一篇：Laravel 中使用 Vue.js 實作Ajax表單驗證實例 下一篇：Jquery getJSON方法用法的詳細分析
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
Nuxt.js SSG（靜態站點產生器）取得API數據 當使用靜態網站產生器建立專案時，我理解提前建立的文件是提供給使用者的。如果進入頁面時有使用axios等取得資料並顯示在螢幕上的邏輯，對應的API是被快取還是不被呼叫？
來自於 2023-11-16 21:36:07
0
1
176
JavaScript：RegExp.escape 函數是否存在？ 我只想用任何可能的字串創建一個正規表示式。 varusersString="Hello?!*`~World()[]";varexpression=newRegE...
來自於 2023-11-16 17:41:27
0
2
232
如何在 XML 檔案中新增換行符（換行符）？ 我有一個XML文件，我想在文本中換行“示例文本123”像這樣SampleText123我已經嘗試了我所說的一切&#xA&#xD\n但沒有任何效果：<?xmlv...
來自於 2023-11-16 16:42:38
0
1
199
捕獲Guzzle的異常 我正在嘗試捕獲在我正在開發的API上運行的一組測試中的異常，並且我正在使用Guzzle來使用API​​方法。我已經將測試包裝在try/catch區塊中，但它仍然拋出未處理的異常錯誤...
來自於 2023-11-16 14:36:03
0
12
290
Vue 3 基於 Props 動態導入 我正在使用unplugin-icon創建一個圖標組件，通常情況下我可以導入例如//scriptimportIconCopyfrom'~icons/prime/copy'//temp...
來自於 2023-11-16 11:40:01
0
1
235
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！