Vue transition group use enter/leave instead of move

Question

Using vue transition-groups, is there a way to trigger the leave + enter transitions instead of the move transitions for moving elements?

It should leave, and enter at the new position instead. The move transition only seems to work with transformations.

Playground: https://codepen.io/anon/pen/WqJEmV

HTML:

<div id="flip-list-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>

JS:

new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})

CSS:

/** Should NOT use this: **/
.flip-list-move {
  transition: transform 1s;
}

/** Should use this instead: **/
.flip-list-enter-active, .flip-list-leave-active {
  transition: all 1s;
}

.flip-list-enter {
  opacity: 0;
  transform: translateX(80px);
}

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

what is the problem with .flip-list-move is there any reason why you don't want to use it — Abdelillah Aissani
@SirDad The move only seems to work with transforms, I need a different animation — Julius

josh7weaver josh7weaver · Accepted Answer · 2019-09-25T23:01:04

I had a similar issue so I thought I'd post here for anyone else who finds this later:

The solution that worked for me is to utilize the key attribute to force vue to treat the item that moved as a "new" item. That way the enter/leave animations get fired instead of the move.

I forked your pen to show how it can work: https://codepen.io/josh7weaver/pen/eYOXxed?editors=1010

As you can see, one downside to this approach is that you have to increase the complexity of your data model for it to work. i.e. before you had a simple array, after we have an array of objects since each object needs to be responsible for its own key.

There are many different ways you could generate a unique ID for the item you want to trick vue into thinking is "new," but the method I used I just copied and pasted from a public gist.

Hope it helps!

Vue transition group use enter/leave instead of move

2 Answers