Для создания плавного сворачивания и разворачивания списка в Vue.js вы можете использовать компонент Transition. Компонент Transition предоставляет вам возможность добавления анимации при добавлении или удалении элементов из DOM.
Для начала, импортируйте компонент Transition из библиотеки Vue:
<template>
<transition name="fade">
<ul v-if="showList">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
</transition>
</template>
<script>
export default {
data() {
return {
showList: true,
};
},
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
В данном примере, мы использовали компонент Transition вокруг списка элементов ul. Мы также добавили атрибут name="fade", который задает имя анимации. В данном случае, мы будем использовать классы fade-enter-active, fade-leave-active, fade-enter, fade-leave-to для определения анимации.
Компонент Transition автоматически добавляет классы к элементу при его создании и удалении. В момент создания элемента, будет добавлен класс fade-enter, а класс fade-enter-active активирует анимацию на переход. Аналогично, при удалении элемента, будет добавлен класс fade-leave-to, а класс fade-leave-active активирует анимацию при удалении элемента.
В приведенном примере, по умолчанию значение showList равно true, что означает, что список будет отображаться. При изменении значения showList на false, список будет плавно скрываться из DOM с использованием анимации.
Не забудьте добавить стили для анимации в теге <style>. В примере использован простой пример анимации с использованием свойства opacity, но вы можете настроить анимацию по своему усмотрению.
Таким образом, при изменении значения showList на false, список будет плавно скрываться, и при изменении значения на true, список будет плавно отображаться с использованием анимации.