In my Vue 3 project, I have created a custom component called Accordion. The purpose of this component is to toggle the display of its content when a button (created using a div instead of a <button> tag) is clicked. The Accordion utilizes a <slot> to receive incoming elements.
The <slot> is contained within a <transition-group>, and the template for the Accordion 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>
When the 'toggle-content' div is clicked, the content in the <slot> should be displayed with a short animation. However, the animation before displaying the content is not functioning properly. Currently, the content does show up after clicking the button though.
Here is the 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;
}
This is how I am implementing 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>
By using <transition> instead of <transition-group>, the animation prior to displaying the content works correctly. However, only the content inside the first div with the class "wrapper1-for-contents" appears, while the content inside the second div remains hidden.
I came across a similar issue on Stack Overflow but the provided solution did not solve my problem.
If anyone can offer assistance or guidance on what might be causing this issue, it would be greatly appreciated.