成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

xiaolinbang / 896人閱讀

摘要：事件有效六個(gè)過度類名簡單地說就是會伴隨的整個(gè)過程，與存在的時(shí)長只都有一幀，所以用肉眼看與幾乎是同時(shí)出現(xiàn)，同時(shí)消失的。未觸發(fā)效果觸發(fā)效果，因?yàn)樗栽谒蟮亩忌弦莆恢冒l(fā)生改變未觸發(fā)效果，過度開始時(shí)改變位置才有效

transition props

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

appear： - boolean，是否在初始渲染時(shí)使用過渡。默認(rèn)為 false。

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

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

mode： - string，控制離開/進(jìn)入的過渡時(shí)間序列。有效的模式有 "out-in" 和 "in-out"；默認(rèn)同時(shí)生效。

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

六個(gè)過度類名



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

???????于是就會經(jīng)?？吹揭恍┫嗤瑒赢嬓Ч麑懛▍s不完全一樣：（這也是我之前存在疑惑的地方）

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:進(jìn)行當(dāng)前動作的dom元素
  },
  //當(dāng)只用 JavaScript 過渡的時(shí)候， 在 enter 和 leave 中，回調(diào)函數(shù) done 是必須的 。否則，它們會被同步調(diào)用，過渡會立即完成。
  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 使用了一個(gè)叫 FLIP 簡單的動畫隊(duì)列，使用 transforms 將元素從之前的位置平滑過渡新的位置。

*v-move是在過度開始時(shí)判斷元素的位置是否發(fā)生改變，并且key是識別每個(gè)元素的關(guān)鍵。 在v-for中用index來綁定key值就不會雖然可行，但是不會觸發(fā)v-move效果，因?yàn)椴还軘?shù)據(jù)怎么變數(shù)組下標(biāo)還是沒變。

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

看下面一個(gè)demo，因?yàn)橹皇且唤M垂直排列的li所以position：absolute會騰出位置，之后的li會上移。

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

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113094.html

    相關(guān)文章

    • Vue.js進(jìn)入/離開&列表過度動畫。

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

      thekingisalwaysluc 評論0 收藏0

    • 慕課網(wǎng) 餓了么 vue2.0 項(xiàng)目

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

      xuexiangjys 評論0 收藏0

    • 接觸的第一個(gè)vue項(xiàng)目

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

      Gemini 評論0 收藏0

    • 作為前端開發(fā)，如何寫好一個(gè)簡歷

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

      abson 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <