Как сделать плавное разворачивание и сворачивания блока v-for?

Question

[Now159]

<div
         class='catalog-card__sabCategory' :class='{"catalog-card__sabCategory-active" : check === item.id}'
         v-for='subItem in check === item.id ? item.subcategories : item.subcategories.slice(0, 5)'
         :key='subItem.id'
       >
         <div @click='nextPage(subItem)' class='catalog-card__sabCategory-title'>
           {{ subItem.title }}
         </div>
       </div>
    <div
      class='catalog-card-roll'
      @click="check === item.id ? (check = '') : (check = item.id)"
      v-if='item.subcategories.length > 5'
    >
      {{ check === item.id ? 'Свернуть' : 'Показать больше' }}
    </div>

Добрый день, помогите пожалуйста, имеется вот такая ситуация, пунктов всегда не более 5 при клике на показать больше их становиться столько сколько их есть. Как мне сделать это разворот вниз плавным.
Буду очень благодарен

Answer 1

[Антон Антон]

Добавить в оборачивающий элемент стиль с указанием height в вычисленное значение сумм scrollHeight имеющихся элементов и класс с transition: height и overflow: hidden.
Показывать:
добавлять элементы в список
ждать nextTick
пересчитывать height оборачивающего элемента.
Скрывать:
пересчитывать height оборачивающего элемента
ждать событие transitionEnd, в его обработчике убирать элементы из списка.
В принципе, можно, наверное, отображать всегда все элементы и пересчитывать только height у оборачивающего элемента, тут зависит от того, сколько их всего. Если сотни, то, наверное, так лучше не делать. Если немного, то будет меньше кода - не надо менять количество и не надо ждать события завершения перехода.