Как сделать на vueJs 3 похожий эффект как jQuery slideToggle?

Question

[Алексей]

Добрый день, подскажите как сделать эффект плавного выпадение блока для FAQ секции, с помощью vue 3 js и tailwind css. Перепробовал куча вариантов ничего не работает. Заранее спасибо.

Comments

[Александр]

Можете показать пример, как выглядит этот эффект?

[Алексей]

Александр добрый день, здесь есть пример на jquery нужно такой же только на vue 3 js и tailwindcss. Я так понимаю это с height effect (scrollHeight)

[Алексей]

Александр https://api.jquery.com/slidetoggle/

[modelair]

ищите по слову accordion

Answer 1

[Aetae]

На чистом vue 3 это делается как-то так:


Мб тут можно как-то добавить tailwind, тут уж сам смотри.

Comments

[Алексей]

Aetae добрый день спасибо, но не мой вариант без Composition я ищу. Я нашел вариант но не понимаю почему не работает корректно.

import PlusIcon from '@/components/icons/faq/PlusIcon.vue'
import MinusIcon from '@/components/icons/faq/MinusIcon.vue'
export default {
name: 'FaqTemplate',
components: {
  PlusIcon,
  MinusIcon
},
props: {
  faqs: {
    type: Array,
    required: true,
  } ,
},
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'
  }
}
}

<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 h-0 font-normal transition-all duration-300" 
        v-show="faq.open"
        >
        {{ faq.answer }}
        </div>
      </Transition>
      </div>
    </div>
</template>

[Aetae]

Алексей, какие проблемы преобразовать в options, элементарно же?:
Если проблема в том что ты совсем не знаешь composition, то совет дня: изучи composition, тебе от него никуда не деться, даже если на этом проекте ты его не используешь.

А твой вариант не работает как минимум из-за v-show, vue transition опережается на физическое появление компонента - v-if. а не скрытие через v-show.

[Алексей]

Aetae, спасибо большое это рабочий вариант.