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

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

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

實(shí)現(xiàn)代碼非常的簡(jiǎn)單，總共不超過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)樣式，通過 height 和 transform 來顯示不同的div --><div class="card-wrapper" :data-sort-index="sortIndex" v-bind:style="{height: value * HEIGHT_INCREMENT + 'px',transform: 'translateX('+sortIndex*100+'%)'}"><!-- 通過改變class，來改變顏色 --><div class="card" :class="cardClassObject"><div class="value">{{value}}</div></div></div></script>

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

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(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.cjxv.cn/21345.html