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

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

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

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

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

你可以在这里看到正在工作的小提琴。