I am currently attempting to implement a simple slide panel using Vue.js, similar to the one shown in this example website: . However, I am facing an issue where the panel does not slide; instead, it waits for 2 seconds and then closes without any animation. I have shared my code on CodePen here: https://codepen.io/TogusaRusso/pen/dqoMLr.
Interestingly, when I remove the v-if directive, I am able to animate the panel by changing the height of the div element. You can view the updated code on CodePen here: https://codepen.io/TogusaRusso/pen/mGJEEJ.
How can I animate the removal of the div element?
<template>
<v-flex xs12 sm6 offset-sm3>
<transition name="slide" :duration="2000">
<div
class="slide-media"
:style="{height: '400px'}"
v-if="isOpen"
>Hello!</div>
</transition>
<v-btn
flat color="orange"
@click="isOpen=!isOpen"
>
{{isOpen?"Close":"Open"}}
</v-btn>
</v-flex>
</template>
<script>
export default {
name: 'SlidePanel',
data() {
return {
isOpen: false,
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.slide-media {
background-color: orangered;
overflow-y:hidden;
}
.slide-enter-active, .slide-leave-active {
transition: height 2s;
}
.slide-enter, .slide-leave-to {
height: 0px;
}
</style>