HOME  >   HTML5 CANVAS  >   CSS3 ANIMATION  >   Bubble Sorting Simulation Animation Based on Vue.js
Bubble Sorting Simulation Animation Based on Vue.js
BY John18 Dec,2020
Tags:

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

Bubble Sorting Simulation Animation Based on Vue.js
HTML Body Code
<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>                        
Css Code
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;
}                        
Js Code
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