vue的列表交錯過渡實現(xiàn)代碼示例
更新時間：2019年05月05日 10:03:33 作者：寧柏龍
這篇文章主要介紹了vue的列表交錯過渡實現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
交錯過渡效果
花里胡哨，華而不...真香
基于vue的，需要你對 vue 的 transition 和 transition-group有過使用和了解。
transition
vue的文檔對 transtion 組件已經(jīng)有了很詳細(xì)的 分析 了。
這里說一下我的理解：
transtion 是vue提供的一個抽象組件，會在 合適的時機(jī) 幫我們操作其包裹的子元素。
這個合適的時機(jī)是：
- beforeEnter dom 從 js 生成，并剛插入頁面的 那一幀(對應(yīng)下圖的動畫開始)
- enter dom 插入頁面之后的 下一幀(對應(yīng)下圖的動畫中)
- afterEnter dom 動畫完成之后的 下一幀(對應(yīng)下圖的動畫結(jié)束)
transition-group
ransition-group組件 會對包裹的列表中每一個元素批量進(jìn)行 transtion組件 的操作。
html
<div id="app" @click="num === 0 ? num++ : num = 5">
<transition-group name="list">
<item v-for="n in num" :key=n />
</transition-group>
</div>
css
.list-enter {
opacity: 0;
transform: translateY(100%);
}
.list-enter-active {
transition: .3s;
}
/* enter-to其實可以不用寫, 沒有顯性寫明，就是默認(rèn)的opacity: 1;transform: none; */
.list-enter-to {
opacity: 1;
transform: translateY(0);
}
接下來給 每個列表項 加上不同 延時 即可。
transition-delay
css
.list-enter-active:nth-child(5n+2) {
transition-delay: .3s;
}
.list-enter-active:nth-child(5n+3) {
transition-delay: .5s;
}
.list-enter-active:nth-child(5n+4) {
transition-delay: .7s;
}
.list-enter-active:nth-child(5n+5) {
transition-delay: .9s;
}
用 transition-delay 配合 css選擇器，確實可以實現(xiàn)交錯過渡，
但是缺點也很明顯，要寫大量的 css ，修改起來也不靈活。
接下來我們用vue的 JavaScript鉤子 來實現(xiàn)。
setTimeout
html
<div id="app" @click="num === 0 ? num++ : num = 5">
<!-- 這里加上 v-bind:css="false" 讓vue跳過對css的檢測，讓我們更好控制 動畫完成的時機(jī) -->
<transition-group
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<item v-for="(n,index) in num" :key=n :data-delay=index*100 />
</transition-group>
</div>
當(dāng)只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進(jìn)行回調(diào)。否則，它們將被同步調(diào)用，過渡會立即完成。
new Vue({
el: "#app",
data: () => ({
num: 0
}),
methods: {
//讓我們在 beforeEnter enter afterEnter 鉤子里，把 vue 幫我們做的事，自己做一遍:
//添加移除 class 類名，監(jiān)聽 transitionend 事件。
beforeEnter(dom) {
dom.classList.add('list-enter', 'list-enter-active');
},
enter(dom,done) {
let delay = dom.dataset.delay;
setTimeout(function () {
dom.classList.remove('list-enter');
dom.classList.add('list-enter-to');
//監(jiān)聽 transitionend 事件
var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
dom.addEventListener(transitionend, function onEnd() {
dom.removeEventListener(transitionend, onEnd);
done(); //調(diào)用done() 告訴vue動畫已完成，以觸發(fā) afterEnter 鉤子
});
}, delay)
},
afterEnter(dom) {
dom.classList.remove('list-enter-to', 'list-enter-active');
}
}
})
目前來說，運(yùn)行良好，實現(xiàn)了交錯過渡的效果，也不用寫大量的 css。
回頭看看我們一共做了2件事，用 .list-enter .list-enter-to 和 setTimeout
告訴瀏覽器，在不同的時間把列表項，從opacity 0 translateY(100%) 過渡到，opacity 1 translateY(0)。
告訴瀏覽器元素的不同狀態(tài)，除了類名之外，
我們可以直接操作dom，把樣式寫到內(nèi)聯(lián)，
除了完全不用寫css類名之外，
還可以有更多的編程性。
style
html
<div id="app" @click="num ? num++ : num=5">
<transition-group
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<item v-for="(n,index) in num"
:key=n
:data-delay=index*100
data-y="100%"
/>
</transition-group>
</div>
new Vue({
el: "#app",
data: () => ({
num: 0
}),
methods: {
beforeEnter(dom) {
let { x = 0, y = 0, s = 1, opacity = 0 } = dom.dataset;
dom.style.cssText = `transition: .3s;opacity: ${opacity};transform: scale(${s}) translateX(${x}) translateY(${y});`;
},
enter(dom,done) {
let delay = dom.dataset.delay;
setTimeout(function () {
dom.style.cssText = `transition: .3s;opacity: 1;transform: scale(1) translateX(0) translateY(0);`;
//監(jiān)聽 transitionend 事件
var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
dom.addEventListener(transitionend, function onEnd() {
dom.removeEventListener(transitionend, onEnd);
done(); //調(diào)用done() 告訴vue動畫已完成，以觸發(fā) afterEnter 鉤子
});
}, delay)
},
afterEnter(dom) {
dom.style.cssText = "";
}
}
})
嗯 不錯，不過既然都上 js 了，能限制的就只有你的想象力了。
html
<item v-for="(n,index) in num"
:key=n
:data-delay=index*100
:data-x="index%2 === 0 ? '-50%' : '50%'"
:data-y="getRandom()+'%'"
:data-s="Math.random()"
/>
getRandom() {
var rate = Math.floor(Math.random() * 90 + 10);
return Math.random() > 0.5 ? rate : -1 * rate;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue單頁面應(yīng)用中動態(tài)修改title問題
這篇文章主要介紹了解決vue單頁面應(yīng)用中動態(tài)修改title問題,本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
vue 點擊按鈕實現(xiàn)動態(tài)掛載子組件的方法
今天小編就為大家分享一篇vue 點擊按鈕實現(xiàn)動態(tài)掛載子組件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue data不可以使用箭頭函數(shù)問題，本文通過源碼解析給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
本文主要介紹了vue?文件切片上傳的項目實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了vue事件處理原理及過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-03-03
Vue3使用vant檢索組件van-search遇到的問題小結(jié)
當(dāng)清空按鈕與檢索按鈕同時居右時,點擊clear清空按鈕事件時會同時觸發(fā)click-right-icon事件,這個時候容易觸發(fā)一系列問題,小編小編給大家分享Vue3使用vant檢索組件van-search遇到的問題小結(jié),感興趣的朋友一起看看吧2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue使用el-table動態(tài)合并列及行，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了Pinia 的 Setup Stores 語法使用實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用vue+epubjs實現(xiàn)電子書閱讀器的基本功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
Vue中的assets和static目錄:使用場景及區(qū)別說明
這篇文章主要介紹了Vue中的assets和static目錄:使用場景及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06