vue.js - 过渡不适用于 vue 3 中的插槽

Question

我试图向这样的插槽添加过渡

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

添加了这样的 CSS 类

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

父模板如下所示

<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>

过渡不起作用。我正在犯什么错误。

Answer 1

过渡应该与条件渲染一起使用v-if="someCondition"，如果您希望过渡在第一次渲染时运行，您必须添加appear道具，在这种情况下您可以使用$slots.defaultas 条件的可用性：

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