JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-material.css">
<div id="app">
  <transition-group name="list" style="display: flex">
  <div
    style="flex: 0 0 25%"
    class="list-item"
    @click="list.splice(index,1)" v-for="(l,index) in list" :key="l">
    <div>
      <h1>
        <div class="md-title">
          {{l}}
        </div>
      </h1>
    </div>
    </div>
  </transition-group>
  <button @click="shuffle">Shuffle</button>
  <pre>{{ list }}</pre>
</div>

CSS

.list-move {
  transition: transform 1s;
}
.list-item {
  margin-right: 10px;
}
.list-item:hover {
  background-color: wheat;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active for <2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

JavaScript

new Vue({
	el: '#app',
  data() {
  	return {
    	list: ['a','b','c','d']
    }
  },
  methods: {
		shuffle () {
			this.list = ['a', 'c', 'b', 'd']
		}
  }
})