过渡不适用于 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.default 的可用性作为条件：

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

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

Transition not working for slots in vue 3

vue.js

vue-transitions

vuejs3