Clicking a blue background element in my code should smoothly slide this element up. Instead, it disappears in a clumsy, non-animated way.

What's wrong in my code?

JSFiddle #1

The problem even persists when simplifying the code by manually assigning the max-height value to the element: 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"  :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;
  }
}

CodePudding user response：

The following CSS will work fine. In Vue, transitions should be fired using classes and transitions, not CSS animations. Edit: I was incorrect, you can in fact use CSS animations in Vue transitions with some caveats.

.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;
}