[SOLVED] Vue transition works only in one way (showing element) not in the other (hiding element)

Vue transition works only in one way (showing element) not in the other (hiding element)

Hitting a button displays an element with a Vue transition that attempts to emulate the jQuery slideDown() and slideUp() animations.

It does work for showing the element but the CSS animation fails for hiding the element, in the sense that the hiding is not animated.

What am I doing wrong?

CodePen: https://codepen.io/BCS-5SBX/pen/ExMYdZO

.slide-enter-active,
.slide-leave-active {
  transition: 2s;
}
  
.slide-enter-to {
   max-height: 500px;
   overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  overflow: hidden;
  max-height: 0;
}

Solution

Try with adding .slide-leave-from class on .slide-enter-to:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const isOpen = ref(false)
    
    const handleClick = () => {
      isOpen.value = !isOpen.value
    };
    
    return {
      handleClick,
      isOpen
    }
  }
})
app.mount('#demo')

.slide-enter-active,
.slide-leave-active {
  transition: all 2s ease;
}
  
.slide-enter-to,
.slide-leave-from {
  max-height: 500px;
  overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  max-height: 0;
  overflow: hidden;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="handleClick()">show items</button>
  <br>
  <transition name="slide">
    <div v-show="isOpen">
      tutu<br>
      tutu<br>
      tutu<br>
      tutu<br>
      tutu<br>
      tutu<br>
    </div>
  </transition>
</div>