網上有很多使用 JavaScript 來模擬冒泡排序排序過程的動畫。今天我們再借助目前最火的 Vue.js 來實現一個冒泡排序動畫效果。

vue.js 是一款輕量級的漸進式 JavaScript 框架，在實現動畫效果方面非常方便。

本文實現的最終動畫效果如下：

實現代碼非常的簡單，總共不超過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><!-- 塔燈網絡 www.xttblog.com --><script type="text/x-template" id="sort-card-template"><!-- 綁定內聯樣式，通過 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>

如果感興趣，還是老規矩，關注我的微信公眾號，回復“vue冒泡排序”下載源碼！

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/21345.html