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 usedisplay: inline-block
or place elements in aflex
context.
So, you can apply display: flex
on the transition-group
:
<template>
<transition-group class="container">
...
</transition-group>
</template>
<style>
.container {
display: flex;
}
</style>
Or display: inline-block
on the span
to be transitioned:
<template>
<span class="notification-item">
...
</span>
</template>
<style>
.notification-item {
display: inline-block;
}
</style>
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 🙂