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

Posted 2023-02-22

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

【英文标题】：Vue/CSS, how to make a smooth height transition between two alternating elements (Fiddle included)

【发布时间】：2017-12-21 01:50:02

【问题描述】：

我正在尝试使两个在相反的 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/

【参考方案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。

【讨论】：

感谢您的编辑和澄清一些概念！不过，我可能对自己的表述有点不精确：我主要想弄清楚的是如何让小提琴中的绿色区域从一个高度设置缓和到另一个高度，而不是从一个高度跳到另一个高度。如果您对如何解决此问题有任何想法，我将不胜感激，否则感谢您对 vue 代码的反馈！

乐于助人！我肯定误读了您的部分问题，我深表歉意。我会看看是否可以更新我的示例以满足您的需求。

@Jtig 我已经更新了我的答案，也为外部容器添加了一个过渡。

太棒了！谢谢！

@DavidL - 小提琴坏了。你能提供并更新一个吗？