nikitakiselev/interview-demo-code
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(categories): added animations for categories list

Browse Source
This commit is contained in:
Nikita Kiselev
2025-09-24 17:41:39 +03:00
parent 294e0cd17e
commit b7b255887d
1 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
spa/src/views/CategoriesList.vue
View File

@@ -11,7 +11,7 @@
</div>
<template v-else>
<button v-if="parentId && parentCategory" class="py-2 px-4 flex items-center mb-3 cursor-pointer" @click="goBack">
<button v-if="parentId && parentCategory" class="py-1 px-4 flex items-center mb-3 cursor-pointer" @click="goBack">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 min-w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
</svg>
@@ -21,22 +21,33 @@
<button
v-if="parentId"
class="py-2 px-4 flex items-center mb-3 cursor-pointer"
class="py-2 px-4 flex items-center mb-3 cursor-pointer border-b w-full pb-2 border-base-200"
@click.prevent="showProductsInParentCategory"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
</svg>
<span class="ml-2">Показать все товары</span>
<span class="ml-2">Показать товары из "{{ parentCategory.name }}"</span>
</button>
<div v-for="category in categories" :key="category.id">
<TransitionGroup
name="stagger"
tag="ul"
appear
>
<li
v-for="(category, i) in categories"
:key="category.id"
:style="{ '--i': i }"
>
<CategoryItem
:category="category"
@onSelect="onSelect"
class="block px-1 rounded-xl transition hover:bg-base-100/60 active:scale-[0.98] will-change-transform"
/>
</div>
</li>
</TransitionGroup>
</template>
</div>
</template>
@@ -97,3 +108,24 @@ onMounted(async () => {
await categoriesStore.fetchCategories();
});
</script>
<style scoped>
/* Стаггер для элементов списка */
.stagger-enter-from,
.stagger-leave-to {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
.stagger-enter-active {
transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
transition-delay: calc(var(--i) * 40ms); /* задержка по индексу */
}
.stagger-leave-active {
position: absolute; /* чтобы соседей не дёргало */
width: 100%;
transition: opacity .18s ease, transform .18s ease;
}
.stagger-move {
transition: transform .28s ease; /* анимация перестановки элементов */
}
</style>