How to reverse transiton in Vue 2 - css

Question

I am trying to create a bottomsheet in vue2. Although the same could be achieved in pure css but I chose to work Vue way.
Below is my working example
I am successfully able to animate on enter but it fails on leave.
What am I missing here ?
<template>
<transition name="bottomsheet">
<div class="bottomsheet" v-if="show">
<transition name="bottomsheet-glass" appear>
<div class="glass" #click="$emit('update:show', false)"></div>
</transition>
<transition name="bottomsheet-container" appear>
<div class="bottomsheet-container">
<div class="bottomsheet-toolbar text-right">
<button #click="$emit('update:show', false)">Close</button>
</div>
<div class="bottomsheet-body">
<slot />
</div>
</div>
</transition>
</div>
</transition>
</template>
<script>
export default {
props: ["show"],
};
</script>
<style lang="scss" scoped>
.bottomsheet {
.glass {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
&-container {
bottom: 0;
left: 0;
right: 0;
position: fixed;
width: 100%;
color: black;
}
&-body {
padding: 20px 20px;
overflow: auto;
background: white;
height: calc(100vh - 250px);
}
}
.bottomsheet-glass-enter-active {
animation: fade-in 2s;
}
.bottomsheet-glass-leave-active {
animation: fade-in 2s reverse;
}
.bottomsheet-container-enter-active {
animation: wait-and-slide-up 4s;
}
.bottomsheet-container-leave-active {
animation: wait-and-slide-up 4s reverse;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes wait-and-slide-up {
0% {
transform: translateY(100%);
}
50% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
</style>