Vue/CSS，如何在两个交替元素（包括小提琴）之间进行平滑的高度转换

我试图使两个元素在相反的v-show谓词上交替，在高度方面在它们之间转换，但是我找不到一个很好的解决方案。 这可能有点初级，但我对过渡/动画缺乏经验，我找不到任何好的例子来指导我

HTML:

我已经把这个问题整理好了：

---

您的代码中有一些严重错误

首先，您需要使用一个转换元素，而不是两个，因为您希望转换在转换元素中发生，而不是跨多个转换元素发生，即使它涉及到它们

HTML:

为了在转换内部元素的同时平滑地转换外部容器，在切换内容以区分

a

和

B

子内容时，会应用一个类

show_B

<div class="interaction" v-bind:class="{ show_B: !show_A }">

---

您可以看到正在工作的小提琴。

感谢您的编辑和澄清一些概念！不过，我的表述可能有点不精确：我主要想弄清楚的是如何让小提琴中的绿色场地从一个高度设置到另一个高度设置，而不是从一个高度跳到另一个高度。如果您对如何解决这个问题有想法，我将不胜感激，否则，感谢您对vue代码的反馈！很乐意帮忙！很抱歉，我完全误解了你的部分问题。我会看看是否可以更新我的示例以满足您的需要。@Jtig我已经更新了我的答案，为外部容器添加了一个转换。太棒了！谢谢@大卫-小提琴坏了。你能提供并更新一个吗？

.swap-enter{
}
.swap-leave-to{
}
.swap-enter-active{
}
.swap-leave-active{
}
.swap-move{
}

<div class="interaction" v-bind:class="{ show_B: !show_A }">
    <button @click="(show_A ? show_A = false : show_A = true);">
      Cycle states
    </button>

    <transition name="fade">
      <div v-if="show_A" class="interaction-A" key="a"> A </div>
      <div v-else class="interaction-B" key="b"> B </div>
    </transition>
</div>

.interaction {
  border: 10px solid lightgreen;
  display: flex;
  flex: 1 0 auto;
  max-height: 225px;
  transition: max-height 0.25s ease-out;
}

.interaction.show_B {
    max-height: 325px;
    transition: max-height 0.15s ease-in;
}

.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .10s;
 }

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}

<div class="interaction" v-bind:class="{ show_B: !show_A }">

.interaction.show_B {
    max-height: 325px;
    transition: max-height 0.15s ease-in;
}