Переглянути тут: https://annie-list.vercel.app/
Ми будемо будувати це за допомогою Nuxt. Але ви можете зробити це в будь-якому проекті, що використовує Vue.js.
Спочатку створіть порожній проект Nuxt, а також додайте Tailwind:
npx nuxi@latest init annie-list
npx nuxi module add tailwindcss
Нам також потрібен плагін Tailwind під назвою tailwindcss-animated:
yarn add tailwindcss-animated
Тепер відкрийте ваш файл nuxt.config.ts і додайте налаштування для цього плагіна:
export default defineNuxtConfig({
...
tailwindcss: {
config: {
plugins: [require("tailwindcss-animated")],
},
},
...
});
Добре. Тепер можемо перейти до створення компонентів. Почнемо з компонента List, який є по суті контейнером з налаштованою анімацією:
Зверніть увагу на спеціальний стиль "interpolate-size: allow-keywords", який необхідний для підтримки анімації висоти елементу div. Це новий трюк, і він підтримується лише в Chrome та Firefox. Без цього необхідно встановити фіксовану висоту для елементу списку div. Для детальнішої інформації, будь ласка, зверніться до https://developer.chrome.com/blog/new-in-chrome-129#animate.
Тепер створимо ListItem:
Зверніть увагу, що встановлений тайм-аут для видалення деяких класів після монтажу. Ці класи використовуються тільки для анімації "підйому" при першому відображенні. Вони заважатимуть анімації виходу, якщо їх залишити. Тому ми видаляємо їх через 1.1 секунди, що більше ніж достатньо часу для завершення анімації.
Нарешті, створимо файл index.vue в папці pages:
Кожному елементу списку задано затримку, щоб анімація виглядала цікавіше.
І все. Весь код доступний тут: https://github.com/wintermute0/annie-list. Насолоджуйтесь.
Перекладено з: Create a beautifully animated list in Vue.js in less than 100 lines of code