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

Question

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

原文由 Gijo Varghese 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 ryantdecker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在这个问题上遇到了一些麻烦，而且很多答案都是复杂的 IMO。过了一会儿，这就是我想出的为“高度：自动”内容进行平滑高度过渡的方法：

 <template>
 <transition name="expand">
   <div v-show="isExpanded" ref="content">
     <slot />
   </div>
 </transition>
</template>

<script setup lang="ts">
import { onMounted, ref } from '@vue'

defineProps<{isExpanded: boolean}>()
const content = ref()
let height = ref()

onMounted(() => {
  height.value = `${content.value.getBoundingClientRect().height}px`
})
</script>

<style scoped lang="less">
.expand-leave-active,
.expand-enter-active {
  transition: all 350ms ease;
  overflow: hidden;
}

.expand-enter-to,
.expand-leave-from {
  height: v-bind(height);
}

.expand-enter-from,
.expand-leave-to {
  opacity: 0;
  height: 0;
}
</style>

希望这对某人有帮助！

原文由 mackishdahacker 发布，翻译遵循 CC BY-SA 4.0 许可协议