小编jen*_*mtg的帖子

我试图制作两个在相反的 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/