mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-30 11:47:55 +01:00
docs: improve landing demo animation (#661)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Florent Delerue
GitHub
@@ -1,105 +1,194 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const refs = ref([])
|
||||||
|
const section = ref()
|
||||||
|
const sectionVisible = ref(false)
|
||||||
|
|
||||||
|
const animate = () => {
|
||||||
|
refs.value.forEach((element) => {
|
||||||
|
element.style.animationFillMode = 'forwards'
|
||||||
|
element.style.transformOrigin = 'center'
|
||||||
|
element.style.animationPlayState = 'paused'
|
||||||
|
element.style.animationDuration = '1s'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
useIntersectionObserver(
|
||||||
|
section,
|
||||||
|
([{ isIntersecting }]) => {
|
||||||
|
sectionVisible.value = isIntersecting
|
||||||
|
},
|
||||||
|
{ threshold: 0.3 }
|
||||||
|
)
|
||||||
|
|
||||||
|
onMounted(() => animate())
|
||||||
|
|
||||||
|
watch(sectionVisible, () => {
|
||||||
|
if (sectionVisible.value) {
|
||||||
|
refs.value.map(element => element.style.animationPlayState = 'running')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Transition appear name="fade">
|
<ULandingGrid ref="section" class="lg:grid-cols-10 lg:gap-8">
|
||||||
<ULandingGrid class="lg:grid-cols-10 lg:gap-8">
|
<div :ref="(el) => (refs[1] = el)" class="col-span-8 flex items-center animate-top">
|
||||||
<div class="col-span-8 flex items-center">
|
<RangeExample />
|
||||||
<RangeExample aria-label="Range" />
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-span-2 row-span-2 flex items-center">
|
<div :ref="(el) => (refs[2] = el)" class="col-span-2 row-span-2 flex items-center animate-right">
|
||||||
<RadioExample />
|
<RadioExample />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-span-2">
|
<div :ref="(el) => (refs[4] = el)" class="col-span-2 animate-left z-[50]">
|
||||||
<DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
|
<DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-span-6 flex flex-wrap items-center justify-between gap-1">
|
<div
|
||||||
<UAvatarGroup :max="2">
|
:ref="(el) => (refs[3] = el)"
|
||||||
<UAvatar
|
class="col-span-6 flex flex-wrap items-center justify-between gap-1 animate-bottom"
|
||||||
src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
|
>
|
||||||
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
|
<UAvatarGroup :max="2">
|
||||||
alt="benjamincanac"
|
<UAvatar
|
||||||
width="40"
|
src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
|
||||||
height="40"
|
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
|
||||||
/>
|
alt="benjamincanac"
|
||||||
<UAvatar
|
width="40"
|
||||||
src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
|
height="40"
|
||||||
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
|
/>
|
||||||
alt="Atinux"
|
<UAvatar
|
||||||
width="40"
|
src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
|
||||||
height="40"
|
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
|
||||||
/>
|
alt="Atinux"
|
||||||
<UAvatar
|
width="40"
|
||||||
src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
|
height="40"
|
||||||
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
|
/>
|
||||||
alt="smarroufin"
|
<UAvatar
|
||||||
width="40"
|
src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
|
||||||
height="40"
|
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
|
||||||
/>
|
alt="smarroufin"
|
||||||
</UAvatarGroup>
|
width="40"
|
||||||
|
height="40"
|
||||||
|
/>
|
||||||
|
</UAvatarGroup>
|
||||||
|
|
||||||
<UButton label="Button" icon="i-heroicons-pencil-square" />
|
<UButton label="Button" icon="i-heroicons-pencil-square" />
|
||||||
|
|
||||||
<UBadge label="Badge" />
|
<UBadge label="Badge" />
|
||||||
|
|
||||||
<UColorModeToggle />
|
<UColorModeToggle />
|
||||||
|
|
||||||
<PaginationExampleBasic />
|
<PaginationExampleBasic />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-span-3 row-span-8 gap-6 flex flex-col justify-between">
|
<div :ref="(el) => (refs[5] = el)" class="col-span-3 row-span-8 gap-6 flex flex-col justify-between animate-left">
|
||||||
<UNotification :id="1" title="Notification" description="This is a notification!" icon="i-heroicons-command-line" />
|
<UNotification :id="1" title="Notification" description="This is a notification!" icon="i-heroicons-command-line" :ui="{ shadow: 'shadow' }" />
|
||||||
|
|
||||||
<TabsExampleItemCustomSlot />
|
<TabsExampleItemCustomSlot />
|
||||||
|
|
||||||
<UCard class="flex-shrink-0">
|
<UCard class="flex-shrink-0">
|
||||||
<div class="flex items-center gap-4 justify-center">
|
<div class="flex items-center gap-4 justify-center">
|
||||||
<USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
|
<USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
|
||||||
<div class="space-y-3 flex-1">
|
<div class="space-y-3 flex-1">
|
||||||
<USkeleton class="h-4 w-full" />
|
<USkeleton class="h-4 w-full" />
|
||||||
<USkeleton class="h-4 w-2/3" />
|
<USkeleton class="h-4 w-2/3" />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</UCard>
|
</div>
|
||||||
</div>
|
</UCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-span-5 row-span-2 flex flex-col">
|
<div :ref="(el) => (refs[6] = el)" class="col-span-5 row-span-2 flex flex-col animate-bottom">
|
||||||
<UCard :ui="{ body: { base: 'flex-1 flex flex-col overflow-y-auto', padding: '' } }" class="col-span-4 row-span-6 flex-1 flex flex-col">
|
<UCard
|
||||||
<CommandPaletteExampleGroups />
|
:ui="{ body: { base: 'flex-1 flex flex-col overflow-y-auto', padding: '' } }"
|
||||||
</UCard>
|
class="col-span-4 row-span-6 flex-1 flex flex-col"
|
||||||
</div>
|
>
|
||||||
|
<CommandPaletteExampleGroups />
|
||||||
|
</UCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-span-2 row-span-2 gap-6 flex flex-col">
|
<div :ref="(el) => (refs[7] = el)" class="col-span-2 row-span-2 gap-6 flex flex-col animate-right ">
|
||||||
<CheckboxExample />
|
<CheckboxExample />
|
||||||
|
|
||||||
<InputExampleClearable />
|
<InputExampleClearable />
|
||||||
|
|
||||||
<UFormGroup label="Labels">
|
<UFormGroup label="Labels">
|
||||||
<SelectMenuExampleCreatable />
|
<SelectMenuExampleCreatable />
|
||||||
</UFormGroup>
|
</UFormGroup>
|
||||||
|
|
||||||
<UCard :ui="{ body: { padding: '!p-1' } }">
|
<UCard :ui="{ body: { padding: '!p-1' } }">
|
||||||
<VerticalNavigationExampleAvatarSlot />
|
<VerticalNavigationExampleAvatarSlot />
|
||||||
</UCard>
|
</UCard>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-span-7 row-span-6">
|
<div :ref="(el) => (refs[8] = el)" class="col-span-7 row-span-6 animate-bottom">
|
||||||
<UCard :ui="{ body: { padding: '' } }">
|
<UCard :ui="{ body: { padding: '' } }">
|
||||||
<TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
|
<TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
|
||||||
</UCard>
|
</UCard>
|
||||||
</div>
|
</div>
|
||||||
</ULandingGrid>
|
</ULandingGrid>
|
||||||
</Transition>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="postcss">
|
||||||
.fade-enter-active,
|
.animate-top {
|
||||||
.fade-leave-active {
|
animation: translateDown;
|
||||||
transition: opacity 0.5s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-from,
|
.animate-bottom {
|
||||||
.fade-leave-to {
|
animation: translateUp;
|
||||||
opacity: 0;
|
}
|
||||||
|
|
||||||
|
.animate-left {
|
||||||
|
animation: translateLeft;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-right {
|
||||||
|
animation-name: translateRight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes translateDown {
|
||||||
|
0% {
|
||||||
|
transform: translate3D(0, -100px, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0, 0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes translateUp {
|
||||||
|
0% {
|
||||||
|
transform: translate3D(0, 100px, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0, 0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes translateLeft {
|
||||||
|
0% {
|
||||||
|
transform: translate3D(-100px, 0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate3D(0, 0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes translateRight {
|
||||||
|
0% {
|
||||||
|
transform: translate3D(100px, 0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate3D(0, 0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user