Transition not working for slots in vue 3

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.

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>