Как исправить slideToggle?

Question

[Алексей]

Добрый день, подскажите пожалуйста в чем ошибка не могу разобраться. Не работает корректно effect SlideToggle как на jQuery. В начале появляется текст, потом плавно выезжает блок, а когда закрывается блок просто скачет, а не плавно заезжает назад. В чем может быть ошибка ?

<template>
  <div class="max-w-267 mx-auto mt-20">
    <div class="cursor-pointer p-7.5 mb-2 last:mb-0" 
      @click="toggleOpen(i)"
      v-for="(faq, i) in faqs"
      :key="i"
      :class="{'bg-black-600': faq.open, 'rounded-3xl': faq.open}"
      >
        <div class="flex items-center justify-between mb-3">
          <div class="text-white-100 text-base font-medium">{{ faq.question }}</div>
          <div class="">
            <PlusIcon v-if="!faq.open"/>
            <MinusIcon v-else/>
          </div>
        </div>
        <Transition
          name="slide"
          @enter="onEnter"
          @after-enter="onAfterEnter"
          @before-leave="onBeforeLeave"
          @after-leave="onAfterLeave"
        >
          <div class="text-white-100 text-xs font-normal transition-height duration-500 ease-in-out" 
          v-show="faq.open"
            >
        {{ faq.answer }}
        </div>
      </Transition>
      </div>
    </div>
</template>
<code lang="javascript">
methods: {
  toggleOpen(index){
    this.faqs.forEach((faq, i) => {
      faq.open = i === index ? !faq.open : false;
    })
  },

  onAfterEnter(el){
    el.style.height = el.scrollHeight + 'px'
  },

  onAfterEnter(el){
    el.style.height = el.scrollHeight + 'px'
  },

  onBeforeLeave(el){
    el.style.height = el.scrollHeight + 'px'
  },

  onAfterLeave(el){
    el.style.height = '0px'
  }
}
</code>