向上滑动的动画没有正确渲染

Question

在我的代码中单击一个蓝色背景元素应该会平滑地将该元素滑上。相反，它以一种笨拙的、非动画的方式消失了。

我的代码有什么问题?

JSFiddle # 1

当通过手动将max-height值分配给元素来简化代码时，问题仍然存在:JSFiddle #2

JS:

data: {
showDiv: true,
maxHeight: ''
},
methods: {
async handleClick() {
await this.$nextTick();
this.maxHeight = `${this.$refs.divRef?.clientHeight}px`;
console.log(this.maxHeight);
this.showDiv = false;
}
}

HTML:

<transition name="slide">
<div v-if="showDiv" @click="handleClick" ref="divRef" class="content" :style="{ 'max-height': maxHeight }">
content...
</div>
</transition>

CSS:

.content {
background: blue;
}
.slide-leave-active {
animation: slide-up 2s;
}
@keyframes slide-up {
0% {
overflow: hidden;
}
100% {
max-height: 0;
}
}

Answer 1

下面的CSS可以正常工作。在Vue中，转换应该使用类和转换来触发，而不是CSS动画。编辑:我错了，你实际上可以在Vue过渡中使用CSS动画，但有一些注意事项。

.content {
background: blue;
height: 100%;
overflow: hidden;
}
.slide-leave-active {
max-height: 100vh;
transition: max-height 0.6s ease;
}
.slide-leave-to {
max-height: 0;
}