Падающая и поднимающая анимация

const app = new Vue({
   el: '#app',
   data() {
     return {
      show: true,
       items: [
         {text: 1111},
         {text: 2222},
         {text: 3333},
         {text: 4444},
         {text: 5555},
         {text: 6666},
       ],
     }
   },
   methods: {
   }
  });

.buttons {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.buttonsall {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-right: 20px;
   padding: 4px 6px 4px 4px;
   gap: 5px;
   background: rgba(0, 0, 0, 0.4);
   border-radius: 8px;
   margin-right: 32px;
   height: 30px;
}

.fade-enter-active {
   animation: fade-in .3s;
}
.fade-leave-active {
   animation: fade-in .3s reverse;
}

@keyframes fade-in {
   0% {
      animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1);
   }
   100% {
      animation-timing-function: cubic-bezier(0.3, -0.05, 0.7, -0.5);
   }
 }


.buttons__text {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;
   font-size: get-vh(15px);
   line-height: get-vh(18px);
   display: flex;
   align-items: center;
   color: rgba(255, 255, 255, 0.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="" id="app">
      <button @click="show = !show">Переключить отображение</button>
      <transition name="fade">
         <ul class="buttons" v-if="show">
            <li class="buttonsall"
            v-for="item in items" >
               <div class="buttons__text">{{ item.text }}</div>
            </li>
         </ul>
      </transition>
   </div>