Animated list

by Max Sinev

HTML

<div id="app">
<button type="button" style="margin-bottom: 40px;" @click="add">Add</button>
  <div class="wrapper">
    <transition-group name="list">
    <div class="item" v-for="a in arr" :key="a">{{ a }}</div>
  </transition-group>
  </div>
  
  
</div>

CSS

.item  {
 padding: 10px;
 height: 15px;
 background: #ccc;
 margin: 5px 0;
 transition: all 1s;
 width: 100%;
}

.item:last-child {
  background: blue;
}

.list-enter {
  opacity: 0;
  transform: translateY(45px);
}

.list-leave-to {
  opacity: 0;
  transform: translateY(-45px);
}

.list-leave-active {
  position: absolute;
}

.wrapper {
  overflow: hidden;
}

Vue

new Vue({
  el: "#app",
  data: {
    arr: [1,2,3,4]
  },
  methods: {
  	add: function(todo){
    	let temp  = this.arr.slice(1);
      temp.push(temp[temp.length - 1] + 1);
      this.arr = temp;
    }
  }
})