CODEWITHSUNDEEP
vue.jscss-animationsvue-transitions
drake035
drake035

Reputation: 2897

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

Upvotes: 0

Views: 246

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23510

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>

Upvotes: 0

Related Questions