Leave-class of Vue transition on not working

Question

I have a default-layout component of which the transition works, but only half of it. The transition consists of two parts, one enter and one leave transition. Problem is that it only shows the enter transition. When a new slot component is rendered, the transition starts at opacity: 100% and transitions to 0%. The leave transition that is supposed to go from opacity: 0% to 100% first, is not shown at all.

Here's default-layout.vue:

<template>
  <div class="bg-slate-900">
    <c-header/>
    <transition
      mode="out-in"
      appear-from-class="opacity-0"
      leave-to-class="opacity-0"
      appear-active-class="transition duration-1000"
      leave-active-class="transition duration-1000" appear>
      <slot/>
    </transition>
  </div>
</template>

This is how default-layout is placed in for example the index.vue component:

<template>
  <default-layout>
    
    // ...

  </default-layout>
</template>

First I had no appear property on the transition, which prevented it entirely from working. After reading Transition not working for slots in vue 3 I've added the appear prop which made half of the transition work at least.

How would I make the leave part of the transition work as well?