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

Question

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

HTML：

<div id="app">

  <div class="history">
    <p>
    How to make the green bordered area transition smoothly between different height in states A and B?
    </p>
    <div class="placeholder-content">
    </div>
  </div>

  <div class="interaction">
    <button @click="(show_A ? show_A = false : show_A = true);">
      Cycle states
    </button>

    <transition name="swap">
    <div v-show="show_A" class="interaction-A"> A </div>
    </transition>

    <transition name="swap">
    <div v-show="!show_A" class="interaction-B"> B </div>
    </transition>

  </div>
</div>

CSS：

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

我已经在小提琴中制定了这个问题：

https://fiddle.jshell.net/jensmtg/7zun5c9f/

Answer 1

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

首先，您需要使用一个过渡元素，而不是两个，因为您希望过渡发生在 IN 过渡元素，而不是 ACROSS 多个过渡元素，即使涉及到它们。

HTML：

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

其次，您需要将key 属性应用到要使用唯一键转换的每个元素，以便 Vue 识别它们是不同的。

我已经清理了你的代码并使用了v-if 和v-else 来确保元素被拆除。

最后，使用淡入淡出过渡可以为您提供很好的平滑变化，以解决高度差异。

CSS：

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

为了在我们转换内部元素的同时平滑地转换外部容器，当内容切换时应用 show_B 类以区分 A 和 B 子内容。

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

我们可以使用它来应用过渡和新的最大尺寸，在子内容调整大小时调整外部内容的大小：

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

你可以看到工作小提琴here。