v-leave-active animation working but v-enter-active animation not working for <transition-group>

Question

I'm using Vue 3 and I have built a custom component named Accordion. It's function is to display and hide the content inside it when a button is clicked (I'm using a div to make the button and not a <button> tag ). The Accordion (my custom component) uses a <slot> for incoming elements.

The <slot> is inside a <transition-group> and the Accordion template looks like this

<template>
  <div
    id='accordion'>
    <div
      :id="['accordion', id, 'collapsible-wrapper'].join('-')"
      class="collapsible-wrapper">
      <div
        id='toggle-content'
        :class="(collapsed ? 'icon-plus green flip expand-content-button': 'icon-minus green flip expand-content-button')"
        @click="collapsed = !collapsed">
      </div>
    </div>
    <transition-group name="accordion">
      <slot v-if="!collapsed"></slot>
    </transition-group>
  </div>
</template>

The way this is supposed to work is that, when the 'toggle-content' div is clicked, the content in <slot> is supposed to be displayed after a little animation and when the toggle-content' div is clicked again, it should disappear with some animation. Right now, when the content inside <slot> disappears, my animation is working but the animation before the content is displayed is not working or not showing up for some reason but my content is being displayed.

Here is my CSS code for the animation :

.accordion-enter-active{
  transition: all 0.3s ease-out;
}

.accordion-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.accordion-enter-from,
.accordion-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

And this is how I am using the Accordion component:

    <Accordion
      :id="1">
      <div class="wrapper1-for-contents">
        <div>
           Some Stuff here
        </div>
        <div>
           Some more stuff here
        </div>
      </div>
      <div class="wrapper2-for-contents">
        <div>
          Some Stuff here
        </div>
        <div>
          Some more stuff here
        </div>
      </div>
   </Accordion>

When I use <transition> instead of <transition-group>, the animation before content is displayed works but not all of my content shows up. Only the first div (with class="wrapper1-for-contents") and it's children show up and my second div (class="wrapper2-for-contents") and it's children don't show up.

I saw a similar question here but that solution didn't work for me

I don't know what I'm doing wrong here, can someone help me out ?

Nikola Pavicevic Nikola Pavicevic · Accepted Answer · 2021-09-16T14:49:38

You can try to add mode

<transition-group name="accordion" mode="out-in">

And animation:

.accordion-enter-active,
.accordion-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.accordion-enter-active {
  transition-delay: .3s;
}

.accordion-enter-from,
.accordion-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

v-leave-active animation working but v-enter-active animation not working for <transition-group>

1 Answers