css - 使用Transition在Vuejs中的v-if上对高度进行动画处理

我正在使用以下代码通过将高度从降低到0px来对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;
}

最佳答案

看起来您已经发布了所有代码，但希望我能理解目标。
尝试将过渡移到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/