[Vuejs]-VueJS 2 List Animation Not working as expected with transition name

by

0👍

✅

Solved it myself: https://jsfiddle.net/rfs12yh6/

<div id="list-complete-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="list-complete" tag="p">
    <h3
      v-for="(item,key) in items"
      v-bind:key="item"
      class="list-complete-item quote"
      :class={active:key!=1}
    >
      {{ item }}
    </h3>
  </transition-group>
  <p>Some footer</p>
</div>

new Vue({
  el: '#list-complete-demo',
  data: {
    items: [1,2,3],
    nextNum: 10
  },
  methods: {
    shuffle: function () {
        this.items.pop()
        this.items.splice(0, 0, this.nextNum++)
    }
  }
})

.list-complete-item {
  transition: all 1s;
  margin-right: 10px;
}
.list-complete-enter
{
  opacity: 0;
  transform: translateY(-20px);
}
.list-complete-leave-to
{
  opacity: 0;
  transform: translateY(20px);
}
.list-complete-leave-active {
  position: absolute;
}
.quote{
  transition: all 1s ease;
}
.active{
  filter: blur(1px);
  transition: all 1s ease
}

Leave a comment