vue的列表交錯過渡實現(xiàn)代碼示例
更新時間：2019年05月05日 10:03:33 作者：寧柏龍
這篇文章主要介紹了vue的列表交錯過渡實現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
交錯過渡效果
花里胡哨，華而不...真香
基于vue的，需要你對 vue 的 transition 和 transition-group有過使用和了解。
transition
vue的文檔對 transtion 組件已經(jīng)有了很詳細的 分析 了。
這里說一下我的理解：
transtion 是vue提供的一個抽象組件，會在 合適的時機 幫我們操作其包裹的子元素。
這個合適的時機是：
- beforeEnter dom 從 js 生成，并剛插入頁面的 那一幀(對應下圖的動畫開始)
- enter dom 插入頁面之后的 下一幀(對應下圖的動畫中)
- afterEnter dom 動畫完成之后的 下一幀(對應下圖的動畫結束)
transition-group
ransition-group組件 會對包裹的列表中每一個元素批量進行 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其實可以不用寫, 沒有顯性寫明，就是默認的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的檢測，讓我們更好控制 動畫完成的時機 -->
<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>
當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。否則，它們將被同步調用，過渡會立即完成。
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(); //調用done() 告訴vue動畫已完成，以觸發(fā) afterEnter 鉤子
});
}, delay)
},
afterEnter(dom) {
dom.classList.remove('list-enter-to', 'list-enter-active');
}
}
})
目前來說，運行良好，實現(xiàn)了交錯過渡的效果，也不用寫大量的 css。
回頭看看我們一共做了2件事，用 .list-enter .list-enter-to 和 setTimeout
告訴瀏覽器，在不同的時間把列表項，從opacity 0 translateY(100%) 過渡到，opacity 1 translateY(0)。
告訴瀏覽器元素的不同狀態(tài)，除了類名之外，
我們可以直接操作dom，把樣式寫到內聯(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(); //調用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;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關于如何利用vue控制元素的顯示與隱藏的相關資料,需要的朋友可以參考下2022-12-12
Vue2.0實現(xiàn)組件數(shù)據(jù)的雙向綁定問題
這篇文章主要介紹了Vue2.0實現(xiàn)組件數(shù)據(jù)的雙向綁定問題，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
這篇文章主要是來和大家探討一下，Vue的響應式系統(tǒng)僅僅是一個Proxy嗎，本文將圍繞此問題探索一下Proxy是如何實現(xiàn)Vue響應式的，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要介紹了Vue中全局常用的過濾方法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue scrollBehavior 滾動行為實現(xiàn)后退頁面顯示在上次瀏覽的位置
這篇文章主要介紹了Vue scrollBehavior 滾動行為實現(xiàn)后退頁面顯示在上次瀏覽的位置，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)商品詳情頁放大鏡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下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
項目中的聯(lián)想輸入框現(xiàn)在都是采用的el-autocomplete實現(xiàn)的，但是數(shù)據(jù)增多就會需要做分頁處理，本文主要介紹了vue對el-autocomplete二次封裝增加下拉分頁，感興趣的可以了解一下2022-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)滾動鼠標滾輪切換頁面，類似于縱向走馬燈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
如何利用Echarts根據(jù)經(jīng)緯度給地圖畫點畫線
最近工作中遇到了一個需求,需要利用echarts在地圖上面標記點位,所下面這篇文章主要給大家介紹了關于如何利用Echarts根據(jù)經(jīng)緯度給地圖畫點畫線的相關資料,需要的朋友可以參考下2022-05-05