網(wǎng)上有很多使用 JavaScript 來(lái)模擬冒泡排序排序過(guò)程的動(dòng)畫(huà)。今天我們?cè)俳柚壳白罨鸬?Vue.js 來(lái)實(shí)現(xiàn)一個(gè)冒泡排序動(dòng)畫(huà)效果。

vue.js 是一款輕量級(jí)的漸進(jìn)式 JavaScript 框架，在實(shí)現(xiàn)動(dòng)畫(huà)效果方面非常方便。

本文實(shí)現(xiàn)的最終動(dòng)畫(huà)效果如下：

實(shí)現(xiàn)代碼非常的簡(jiǎn)單，總共不超過(guò)100行。主要代碼如下：

<div id="app"><div class="cards"><sort-card v-for="(card, index) in store.state.cards" :key="index" :value="card.value" :sort-index="card.sortIndex" :is-active="card.isActive" :is-locked="card.isLocked"></sort-card></div><div class="control-panel"><h1>Bubble Sort Visualizer</h1><button aria-label="Reset" v-if="store.state.done" @click="reset(SORT_ARRAY)"><i class="fa fa-refresh" aria-hidden="true"></i></button></div></div><!-- 塔燈網(wǎng)絡(luò) www.xttblog.com --><script type="text/x-template" id="sort-card-template"><!-- 綁定內(nèi)聯(lián)樣式，通過(guò) height 和 transform 來(lái)顯示不同的div --><div class="card-wrapper" :data-sort-index="sortIndex" v-bind:style="{height: value * HEIGHT_INCREMENT + 'px',transform: 'translateX('+sortIndex*100+'%)'}"><!-- 通過(guò)改變class，來(lái)改變顏色 --><div class="card" :class="cardClassObject"><div class="value">{{value}}</div></div></div></script>

如果感興趣，還是老規(guī)矩，關(guān)注我的微信公眾號(hào)，回復(fù)“vue冒泡排序”下載源碼！

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.cokiv.cn/21345.html