vue的列表交錯(cuò)過渡實(shí)現(xiàn)代碼示例
交錯(cuò)過渡效果
花里胡哨，華而不...真香
基于vue的，需要你對(duì) vue 的 transition 和 transition-group有過使用和了解。
transition
vue的文檔對(duì) transtion 組件已經(jīng)有了很詳細(xì)的 分析 了。
這里說一下我的理解：
transtion 是vue提供的一個(gè)抽象組件，會(huì)在 合適的時(shí)機(jī) 幫我們操作其包裹的子元素。
這個(gè)合適的時(shí)機(jī)是：
- beforeEnter dom 從 js 生成，并剛插入頁(yè)面的 那一幀(對(duì)應(yīng)下圖的動(dòng)畫開始)
- enter dom 插入頁(yè)面之后的 下一幀(對(duì)應(yīng)下圖的動(dòng)畫中)
- afterEnter dom 動(dòng)畫完成之后的 下一幀(對(duì)應(yīng)下圖的動(dòng)畫結(jié)束)
transition-group
ransition-group組件 會(huì)對(duì)包裹的列表中每一個(gè)元素批量進(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其實(shí)可以不用寫, 沒有顯性寫明，就是默認(rèn)的opacity: 1;transform: none; */
.list-enter-to {
opacity: 1;
transform: translateY(0);
}
接下來給 每個(gè)列表項(xiàng) 加上不同 延時(shí) 即可。
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選擇器，確實(shí)可以實(shí)現(xiàn)交錯(cuò)過渡，
但是缺點(diǎn)也很明顯，要寫大量的 css ，修改起來也不靈活。
接下來我們用vue的 JavaScript鉤子 來實(shí)現(xiàn)。
setTimeout
html
<div id="app" @click="num === 0 ? num++ : num = 5">
<!-- 這里加上 v-bind:css="false" 讓vue跳過對(duì)css的檢測(cè)，讓我們更好控制 動(dòng)畫完成的時(shí)機(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 過渡的時(shí)候，在 enter 和 leave 中必須使用 done 進(jìn)行回調(diào)。否則，它們將被同步調(diào)用，過渡會(huì)立即完成。
new Vue({
el: "#app",
data: () => ({
num: 0
}),
methods: {
//讓我們?cè)?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動(dòng)畫已完成，以觸發(fā) afterEnter 鉤子
});
}, delay)
},
afterEnter(dom) {
dom.classList.remove('list-enter-to', 'list-enter-active');
}
}
})
目前來說，運(yùn)行良好，實(shí)現(xiàn)了交錯(cuò)過渡的效果，也不用寫大量的 css。
回頭看看我們一共做了2件事，用 .list-enter .list-enter-to 和 setTimeout
告訴瀏覽器，在不同的時(shí)間把列表項(xiàng)，從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動(dòng)畫已完成，以觸發(fā) afterEnter 鉤子
});
}, delay)
},
afterEnter(dom) {
dom.style.cssText = "";
}
}
})
嗯 不錯(cuò)，不過既然都上 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;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關(guān)于如何利用vue控制元素的顯示與隱藏的相關(guān)資料,需要的朋友可以參考下2022-12-12
Vue2.0實(shí)現(xiàn)組件數(shù)據(jù)的雙向綁定問題
這篇文章主要介紹了Vue2.0實(shí)現(xiàn)組件數(shù)據(jù)的雙向綁定問題，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03
淺析Proxy如何實(shí)現(xiàn)Vue響應(yīng)式
這篇文章主要是來和大家探討一下，Vue的響應(yīng)式系統(tǒng)僅僅是一個(gè)Proxy嗎，本文將圍繞此問題探索一下Proxy是如何實(shí)現(xiàn)Vue響應(yīng)式的，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要介紹了Vue中全局常用的過濾方法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue scrollBehavior 滾動(dòng)行為實(shí)現(xiàn)后退頁(yè)面顯示在上次瀏覽的位置
這篇文章主要介紹了Vue scrollBehavior 滾動(dòng)行為實(shí)現(xiàn)后退頁(yè)面顯示在上次瀏覽的位置，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue實(shí)現(xiàn)商品詳情頁(yè)放大鏡功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品詳情頁(yè)放大鏡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下2018-12-12
vue對(duì)el-autocomplete二次封裝增加下拉分頁(yè)
項(xiàng)目中的聯(lián)想輸入框現(xiàn)在都是采用的el-autocomplete實(shí)現(xiàn)的，但是數(shù)據(jù)增多就會(huì)需要做分頁(yè)處理，本文主要介紹了vue對(duì)el-autocomplete二次封裝增加下拉分頁(yè)，感興趣的可以了解一下2022-03-03
vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面，類似于縱向走馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
如何利用Echarts根據(jù)經(jīng)緯度給地圖畫點(diǎn)畫線
最近工作中遇到了一個(gè)需求,需要利用echarts在地圖上面標(biāo)記點(diǎn)位,所下面這篇文章主要給大家介紹了關(guān)于如何利用Echarts根據(jù)經(jīng)緯度給地圖畫點(diǎn)畫線的相關(guān)資料,需要的朋友可以參考下2022-05-05