Vue

by Nakazaki

HTML

<div id="app">
    <button @click="add">add new name </button>
    <transition-group name="list">
      <div v-for="item in items" :key="item.id">
         <div class="animation">{{ item.name }}</div>
      </div>
    </transition-group>
</div>

CSS

.list-enter-active, .list-leave-active {
  animation: loadingComment 0.5s ease-in-out forwards;
}


@keyframes loadingComment {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

Vue

new Vue({
  el: "#app",
  data: {
  	items: [
    	{ id: 1, name: "Mahdi fakhr" },
      { id: 2, name: "Reza" },
      { id: 3, name: "David" },
      { id: 4, name: "VUe js" },
    ],
    id: 4
  },
  methods: {
  	add() {
    	this.items.unshift({id: ++this.id, name: `test ${this.id}`});
    }
  }
})