Vue Animations Lists

by Plínio Naves

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">

  <h2>Animações em listas</h2>
  
  <button v-on:click="shuffle">Misturar</button>
  <br>
  <input type="text" placeholder="Novo item" @keyup.enter="add" ref="input">
  
  <transition-group name="list" tag="ul">
    <!-- aplicar classe no item para animar saída -->
    <li v-for="item in items" :key="item" class="list-move">
      <span>{{ item }}</span>
      <button @click="remove(item)">x</button>
     </li>
  </transition-group>
  
</div>

CSS

.list-enter, .list-leave-to {
  opacity: 0;
}

.list-enter {
  transform: translateX(-50px);
}

.list-leave-to {
  transform: translateX(50px);
}

.list-enter-active, .list-leave-active, .list-move {
  transition: all 0.5s;
}

/* para animar saída */
.list-leave-active {
  position: absolute;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	items: [
    	'Vue JS',
      'Vuex',
      'Vue Router',
      'Vue Press',
      'Vue Native'
    ]
  },
  methods: {
  	add(event) {
    	this.items.push(event.target.value);
      this.$refs.input.value = '';
    },
  	remove(item) {
    	const index = this.items.findIndex(e => e === item);
      this.items.splice(index, 1);
    },
    shuffle(event) {
      this.items = _.shuffle(this.items);
    }
  }
});