Transition not working for slots in vue 3

Question

I was trying to add transition to a slot like this

<template>
 <transition name="committee">
     <div class="card">
        <slot></slot>
     </div>
 </transition>
</template>

Added CSS classes like this

 .committee-enter-from{
   opacity: 0;
   transform: translateX(-3rem);
 }
 .committee-enter-active{
   transition: all 1s ease-in;
 }
 .committee-enter-to{
   opacity: 1;
   transform: translateX(0) ;
 }

The parent template looks like this

<section class="section">
    <app-committee>
        <div class="content">
            <div class="imgText">
                <div class="imgBx">
                    <img src="#">
                </div>
                <h3>Samanta Doe<br><span>Manager</span></h3>
            </div>
            <ul class="sci">        
                <li><a href="#">
                </a></li>
                <li><a href="#">
                </a></li>
            </ul>
        </div>
    </app-committee>
</section>

The transition is not working. What may be the mistake i am making.

@BoussadjraBrahim that worked for cards. Please let us know how it worked so that we can understand it better. It would be great if you can provide it as an answer so that others can also refer — vithu shaji, Jul 25 '21 at 07:31

score 3 · Accepted Answer · answered Jul 25 '21 at 07:49

The transition should work with conditional rendering v-if="someCondition" and if you want the transition to run at the first rendering you've to add appear prop, in the case you could use the availability of $slots.default as condition :

<transition name="committee" appear>
 <div class="card" v-if="$slots.default">
  <slot></slot>
 </div>
</transition>

Transition not working for slots in vue 3

1 Answers1

Linked