v-leave-active 动画工作，但 v-enter-active 动画不适用于 <transition-group>

Posted 2023-03-07

【中文标题】v-leave-active 动画工作，但 v-enter-active 动画不适用于 <transition-group>

【英文标题】：v-leave-active animation working but v-enter-active animation not working for <transition-group>

【发布时间】：2021-11-11 12:31:59

【问题描述】：

我正在使用 Vue 3，并且我构建了一个名为 Accordion 的自定义组件。它的功能是在单击按钮时显示和隐藏其中的内容（我使用 div 来制作按钮而不是 <button> 标签）。 Accordion（我的自定义组件）对传入元素使用 <slot>。

<slot> 在 <transition-group> 内 手风琴模板看起来像这样

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

这应该起作用的方式是，当单击“切换内容”div 时，<slot> 中的内容应该在一点动画之后显示，并且当再次单击切换内容 div 时，它应该随着一些动画消失。 现在，当<slot>中的内容消失时，我的动画正在运行，但是在显示内容之前的动画不起作用或由于某种原因没有显示，但我的内容正在显示。

这是我的动画 CSS 代码：

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

这就是我使用 Accordion 组件的方式：

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

当我使用<transition> 而不是<transition-group> 时，显示内容之前的动画有效，但并非我的所有内容都显示出来。只有第一个 div（带有 class="wrapper1-for-contents"）和它的孩子出现，而我的第二个 div（class="wrapper2-for-contents"）和它的孩子没有出现。

我看到了一个类似的问题 here，但该解决方案对我不起作用

我不知道我在这里做错了什么，有人可以帮助我吗？

【参考方案1】：

您可以尝试添加mode

<transition-group name="accordion" mode="out-in">

还有动画：

.accordion-enter-active,
.accordion-leave-active 
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);


.accordion-enter-active 
  transition-delay: .3s;


.accordion-enter-from,
.accordion-leave-to 
  transform: translateX(20px);
  opacity: 0;
 

【讨论】：

感谢您的回复，但我试过了，但它不起作用。同样的问题仍然存在

现在试试吧，求求你，我更新了答案

再次感谢，我试过了，但同样的问题仍然存在，本应在显示内容之前发生的动画没有发生，内容立即显示，但内容消失时的动画仍然有效

【参考方案2】：

尝试将“出现”属性添加到<transition-group> 标记

<transition-group name="accordion" appear>

【参考方案3】：

我能够解决这个问题，虽然我不知道为什么它不起作用 当我将手风琴组件的内部（在我设置 id="1" 之前）包裹在一个 div 中时，动画效果很好

抱歉更新晚了