Vue transition-group

hello world

by jacob hsu

HTML

<div id="root">
  <transition-group>
    <div v-for="item of list" :key="item.id">
      {{item.title}}
    </div>
  </transition-group>
  
<!--   <transition>
    <div>hello world</div>
  </transition>
  <transition>
    <div>hello world</div>
  </transition>
  <transition>
    <div>hello world</div>
  </transition> -->

   
   <button @click="handleClick">
    Toggle
  </button>
</div>

CSS

.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}
.v-enter, .v-leave-to {
  opacity: 0;
}

Vue

var count  = 0;
new Vue({
  el: '#root',
  data: {
    list: []
  },
  methods: {
   	handleClick: function() {
 			this.list.push({
      	id: count++,
        title: 'hello world'
      })
    }
  }
})