使用Transition在Vuejs中为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;
}

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/

Answer 2

我在这个问题上遇到了一些麻烦，而且在我看来，许多答案都很复杂。一段时间后，这就是我想出的方法来为“height：auto”内容进行平滑的高度过渡：

<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>

希望这对某人有帮助！