[Vuejs]-List Transitions work only for "enter" not for "leave"

by

0👍

I couldn’t reproduce the exact symptom with that code (demo 1), which only transitions on leave instead of enter in your scenario. The reason for that is because the span is display: inline, which prevents the transition.

The Vue docs provide a tip for this:

One important note is that these FLIP transitions do not work with elements set to display: inline. As an alternative, you can use display: inline-block or place elements in a flex context.

So, you can apply display: flex on the transition-group:

<template>
  <transition-group class="container">
    ...
  </transition-group>
</template>

<style>
.container {
  display: flex;
}
</style>

demo 2

Or display: inline-block on the span to be transitioned:

<template>
  <span class="notification-item">
    ...
  </span>
</template>

<style>
.notification-item {
  display: inline-block;
}
</style>

demo 3

0👍

Turns out by replacing <div v-if="notifications.length"> with <div v-if="notifications"> transitions now work. Even though this doesn’t make any sense to me.

If anyone can explain in a comment that’d be nice 🙂

Leave a comment