vue過度動畫的使用方法整理

xiaolinbang 發布于2019-08-29 15:05 / 886人閱讀

摘要：事件有效六個過度類名簡單地說就是會伴隨的整個過程，與存在的時長只都有一幀，所以用肉眼看與幾乎是同時出現，同時消失的。未觸發效果觸發效果，因為所以在他之后的都上移位置發生改變未觸發效果，過度開始時改變位置才有效

transition props

name： - string，用于自動生成 CSS 過渡類名。例如：name: "fade" 將自動拓展為.fade-enter，.fade-enter-active等。默認類名為 "v"

appear： - boolean，是否在初始渲染時使用過渡。默認為 false。

css： - boolean，是否使用 CSS 過渡類。默認為 true。如果設置為 false，將只通過組件事件觸發注冊的 JavaScript 鉤子。

type： - string，指定過渡事件類型，偵聽過渡何時結束。有效值為 "transition" 和 "animation"。默認 Vue.js 將自動檢測出持續時間長的為過渡事件類型。

mode： - string，控制離開/進入的過渡時間序列。有效的模式有 "out-in" 和 "in-out"；默認同時生效。

enter-class： - string

leave-class： - string

appear-class： - string

enter-to-class： - string

leave-to-class： - string

appear-to-class： - string

enter-active-class： - string

leave-active-class： - string

appear-active-class： - string

事件

before-enter

before-leave

before-appear

enter

leave

appear

aftrt-enter

after-leave

after-appear

enter-cancelled

leave-cancelled(v-show有效)

appear-cancelled

六個過度類名

???????簡單地說就是 active 會伴隨 enter/leave 的整個過程，v-enter 與 v-leave 存在的時長只都有一幀，所以用肉眼看v-enter-to與v-enter-active幾乎是同時出現，同時消失的。

???????于是就會經常看到一些相同動畫效果寫法卻不完全一樣：（這也是我之前存在疑惑的地方）

1、

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

2、

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}

單組件過度 過度

  
    hello

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

動畫

類似的只需要在過度類中填寫動畫即可

.fade-enter-active, .fade-leave-active {
  animation: fade-in .5s;
}
.fade-enter, .fade-leave-to {
  animation:fade-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    ooacity: 0;
  }
  50% {
    ooacity: .5;
  }
  100% {
    ooacity: 1;
  }
}

自定義過度類名

vue還支持分別添加自定義過度類名，能夠方便的配合第三方動畫庫

enter-class

enter-active-class

enter-to-class (2.1.8+)

leave-class

leave-active-class

leave-to-class (2.1.8+)

JavaScript鉤子

methods: {
  beforeEnter: function (el) {
    el.style.opacity = 0; //el:進行當前動作的dom元素
  },
  //當只用 JavaScript 過渡的時候， 在 enter 和 leave 中，回調函數 done 是必須的 。否則，它們會被同步調用，過渡會立即完成。
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },


  beforeLeave: function (el) {
    // ...
  },
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

列表過度

列表過度使用組件,并且需要綁定唯一的key

v-move特性

Vue 使用了一個叫 FLIP 簡單的動畫隊列，使用 transforms 將元素從之前的位置平滑過渡新的位置。

*v-move是在過度開始時判斷元素的位置是否發生改變，并且key是識別每個元素的關鍵。在v-for中用index來綁定key值就不會雖然可行，但是不會觸發v-move效果，因為不管數據怎么變數組下標還是沒變。

*一定要在過度開始時就然元素的位置發生改變：v-enter或者v-leave或者active階段，而v-leave-to 和v-enter-to不行

看下面一個demo，因為只是一組垂直排列的li所以position：absolute會騰出位置，之后的li會上移。

    
      
        {{item.text}}

    .slide-move{            /*v-move*/
        trsnsition: all .5s;
    }
    .slide-leave-active{    /*未觸發v-move效果*/
       transform: translate3d(-100%, 0, 0);
    }
    .slide-leave-active{    /*觸發v-move效果，因為absolute所以在他之后的li都上移位置發生改變*/
       position: absolute;
       transform: translate3d(-100%, 0, 0);
    }
    slide-leave-to{    /*未觸發v-move效果，過度開始時改變位置才有效*/
       position: absolute;
       transform: translate3d(-100%, 0, 0);
    }

GPU云服務器云服務器動畫方法 vue使用webrtc vue 中使用 webrtc vue怎么使用webRTC

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113094.html

Vue.js進入/離開&列表過度動畫。

摘要：包括以下工具在過渡和動畫中自動應用可以配合第三方動畫庫，如在過渡鉤子函數中使用直接操作可以配合使用第三方動畫庫，如在這里，我們只會講到進入離開和列表的過渡。不僅可以進入和離開動畫，還可以改變定位。概述 Vue在插入、更新或則移除DOM時，提供多種不同方式的應用過渡效果。包括以下工具： *在CSS過渡和動畫中自動應用class *可以配合第三方CSS動畫庫，如Animate.css *...

thekingisalwaysluc 2019-08-23 15:23 評論0 收藏0
慕課網餓了么 vue2.0 項目

餓了么 vue 項目總結項目效果預覽 ele效果預覽項目源碼地址 ele源碼跟著慕課網黃軼老師敲餓了么 vue 項目作者項目源代碼地址項目完成之后 npm run build 這本來是寫在最后面一段的，我現在把他寫在了最前面，方便我們事先知道，整個項目做完之后是什么樣子的項目完成之后在根目錄下 npm run build （就是 npm run dev 的那個目錄）會在根目錄...

xuexiangjys 2019-08-20 18:10 評論0 收藏0
接觸的第一個vue項目

摘要：序言剛來杭州的時候，是兩個人一起來的。后來一個回家當老師，一個留在了杭州。想起那時，在慕課買的第一課程，囫圇吞棗的看完了。現在回過頭來看看，這個臨時抱佛腳的啟蒙項目，真的還有不少的收獲。滾動視圖的位置緩存路由元對象。序言剛來杭州的時候，是兩個人一起來的。后來一個回家當老師，一個留在了杭州。想起那時，在慕課買的第一課程，囫圇吞棗的看完了。勉強才找到了一份工作，今天看起來，其實還是有點...

Gemini 2019-08-26 14:04 評論0 收藏0
作為前端開發，如何寫好一個簡歷

摘要：項目地址需求來源通常在各個招聘網站，我們填寫完一些信息后，網站就可以幫助我們生成一個很不錯的簡歷。但是作為一名開發者，尤其是前端開發者，可能對這種簡歷并不滿意。，前端開發神器。最后，為了保護隱私。背景前一陣子，閑下來便開始著手做一個一直想做的東西--resume。經過幾天業余時間的折騰，終于做出了一番模樣。Github項目地址：https://github.com/eternity...

abson 2019-08-29 11:14 評論0 收藏0