Vue.js is a lightweight progressive JavaScript framework. This time I bring you an interesting animation based on Vue.js. It mainly simulates the bubble sorting process. Bubble sorting should be very familiar to everyone. This time using vue.js to visually show the whole process of bubble sorting is still very creative.
Advertisement
<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>
body { margin: 40px 0; color: #fff; background-color: #000; } #app { width: 640px; margin: 0 auto; } .cards { position: relative; height: 400px; } .card-wrapper { position: absolute; bottom: 0; width: 6.25%; transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card { position: relative; height: 100%; margin: 0 5px; border: 1px solid #ff3179; background-color: #000; box-shadow: 0 0 25px #c2255c; }
reset (state, payload) { state.values = payload.values; state.values.forEach((item,i)=>state.strValues.push(item+'&'+i)); state.cards = []; for (let i = 0; i < state.values.length; i++) { state.cards.push({ value:state.values[i], strValue:state.strValues[i], sortIndex:i, isActive: false, isLocked: false }); } state.done = false; }, swap (state, payload) { let a = payload.indexes[0]; let b = payload.indexes[1]; let temp = state.values[a]; state.values[a] = state.values[b]; state.values[b] = temp; let temp2 = state.strValues[a]; state.strValues[a] = state.strValues[b]; state.strValues[b] = temp2; state.cards.forEach((card) => { card.sortIndex =state.strValues.indexOf(card.strValue); }); },
Advertisement