css - 使用 Transition 在 Vuejs 中的 v-if 上设置动画高度

Question

我正在使用以下代码通过将高度从 0 像素降低来为 v-if 元素设置动画。动画效果很好。但问题是我必须指定元素的初始高度是 CSS。对于一个元素，这没问题，但我想将此动画应用于多个元素。我怎样才能解决这个问题？因此，无论高度如何，动画效果都很好!

<transition name="fadeHeight" mode="out-in">
<div v-if="something">
<p>something over here where the height is not constant</p>
</div>
</transition>

.fadeHeight-enter-active,
.fadeHeight-leave-active {
  transition: all 0.2s;
  height: 230px;
}
.fadeHeight-enter,
.fadeHeight-leave-to
{
  opacity: 0;
  height: 0px;
}

Answer 1

看起来您并没有发布所有代码，但希望我理解了目标。

尝试将过渡移动到 max-height 属性:

.fadeHeight-enter-active,
.fadeHeight-leave-active {
  transition: all 0.2s;
  max-height: 230px;
}
.fadeHeight-enter,
.fadeHeight-leave-to
{
  opacity: 0;
  max-height: 0px;
}

只要您将最大高度设置为大于最高元素，它应该可以满足您的需求。请注意，您可能还想使用 overflow:hidden。如果元素的实际高度有显着变化，这个解决方案可能不是最好的，因为它会使动画持续时间/延迟看起来非常不同。

https://jsfiddle.net/7ap15qq0/4/