JSFiddle - React, Tailwind, and code Playground

Vue transition for carousel.

by Travis Almand

HTML

<div id="app">
  <div id="frame_outer">
      <transition-group tag="div" name="slide">
        <div
          v-for="color in colors"
          v-bind:key="color"
          @transitionend="endTransition"
        >
          <div
            :style="{'background-color': color}"
            class="color"
          ></div>
        </div>
      </transition-group>
  </div>
  <button @click="shuffleBtnHandler">shuffle</button>
</div>

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

#app {
  align-items: center;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

#frame_outer {
  border: 2px solid black;
  height: 200px;
  overflow: hidden;
  width: 320px;

  & > div {
    display: flex;
    flex-wrap: wrap;
    height: 400px;
    left: -330px;
    position: relative;
    top: -210px;
    width: calc(320px * 4);
  }
 }

.color {
  height: 200px;
  margin: 0 10px 10px 0;
  transition: transform 1s;
  width: 320px;
}

button {
  margin: 10px;
}

.slide-move {
  transition: transform 1s 1s;
}

.active {
  transform: scale3d(0.75, 0.75, 1);
}

Vue

console.clear();

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

new Vue({
  el: "#app",
  
  data: {
    colors: ['red', 'blue', 'green', 'gray', 'purple', 'gainsboro', 'yellow', 'orange', 'rebeccapurple'],
    isActive: false
  },
  
  methods: {
    endTransition: function (e) {
      this.isActive = false;
    },
  	shuffleArray: function () {
    	return shuffle(this.colors);
    },
    shuffleBtnHandler: function () {
    	let shuffled = this.shuffleArray();
      this.colors = [];
      
      this.isActive = true;
      
      shuffled.forEach((color) => {
      	this.colors.push(color);
      });
    }
  }
});

document.querySelector('.color').addEventListener('transitionstart', function (e) {
	console.log(e);
});