Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: improve landing demo animation #661

Merged
merged 4 commits into from
Sep 12, 2023
Merged

docs: improve landing demo animation #661

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
95465c6
feat(HomeDemo): animation
Flosciante Sep 11, 2023
7e468dd
Merge branch 'dev' into feat/home-demo-animation
Flosciante Sep 11, 2023
d36d2cf
fix: linter
Flosciante Sep 11, 2023
8010a8d
up
benjamincanac Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
283 changes: 186 additions & 97 deletions docs/components/home/HomeDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
<Transition appear name="fade">
<ULandingGrid class="lg:grid-cols-10 lg:gap-8">
<div class="col-span-8 flex items-center">
<RangeExample aria-label="Range" />
</div>

<div class="col-span-2 row-span-2 flex items-center">
<RadioExample />
</div>

<div class="col-span-2">
<DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
</div>

<div class="col-span-6 flex flex-wrap items-center justify-between gap-1">
<UAvatarGroup :max="2">
<UAvatar
src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
alt="benjamincanac"
width="40"
height="40"
/>
<UAvatar
src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
alt="Atinux"
width="40"
height="40"
/>
<UAvatar
src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
alt="smarroufin"
width="40"
height="40"
/>
</UAvatarGroup>

<UButton label="Button" icon="i-heroicons-pencil-square" />

<UBadge label="Badge" />

<UColorModeToggle />

<PaginationExampleBasic />
</div>

<div class="col-span-3 row-span-8 gap-6 flex flex-col justify-between">
<UNotification :id="1" title="Notification" description="This is a notification!" icon="i-heroicons-command-line" />

<TabsExampleItemCustomSlot />

<UCard class="flex-shrink-0">
<div class="flex items-center gap-4 justify-center">
<USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
<div class="space-y-3 flex-1">
<USkeleton class="h-4 w-full" />
<USkeleton class="h-4 w-2/3" />
</div>
<ULandingGrid ref="section" class="lg:grid-cols-10 lg:gap-8">
<div :ref="(el) => (refs[1] = el)" class="col-span-8 flex items-center animate-top">
<RangeExample />
</div>

<div :ref="(el) => (refs[2] = el)" class="col-span-2 row-span-2 flex items-center animate-right">
<RadioExample />
</div>

<div :ref="(el) => (refs[4] = el)" class="col-span-2 animate-left z-[50]">
<DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
</div>

<div
:ref="(el) => (refs[3] = el)"
class="col-span-6 flex flex-wrap items-center justify-between gap-1 animate-bottom"
>
<UAvatarGroup :max="2">
<UAvatar
src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
alt="benjamincanac"
width="40"
height="40"
/>
<UAvatar
src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
alt="Atinux"
width="40"
height="40"
/>
<UAvatar
src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
alt="smarroufin"
width="40"
height="40"
/>
</UAvatarGroup>

<UButton label="Button" icon="i-heroicons-pencil-square" />

<UBadge label="Badge" />

<UColorModeToggle />

<PaginationExampleBasic />
</div>

<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" :ui="{ shadow: 'shadow' }" />

<TabsExampleItemCustomSlot />

<UCard class="flex-shrink-0">
<div class="flex items-center gap-4 justify-center">
<USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
<div class="space-y-3 flex-1">
<USkeleton class="h-4 w-full" />
<USkeleton class="h-4 w-2/3" />
</div>
</UCard>
</div>

<div class="col-span-5 row-span-2 flex flex-col">
<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">
<CommandPaletteExampleGroups />
</UCard>
</div>

<div class="col-span-2 row-span-2 gap-6 flex flex-col">
<CheckboxExample />

<InputExampleClearable />

<UFormGroup label="Labels">
<SelectMenuExampleCreatable />
</UFormGroup>

<UCard :ui="{ body: { padding: '!p-1' } }">
<VerticalNavigationExampleAvatarSlot />
</UCard>
</div>

<div class="col-span-7 row-span-6">
<UCard :ui="{ body: { padding: '' } }">
<TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
</UCard>
</div>
</ULandingGrid>
</Transition>
</div>
</UCard>
</div>

<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"
>
<CommandPaletteExampleGroups />
</UCard>
</div>

<div :ref="(el) => (refs[7] = el)" class="col-span-2 row-span-2 gap-6 flex flex-col animate-right ">
<CheckboxExample />

<InputExampleClearable />

<UFormGroup label="Labels">
<SelectMenuExampleCreatable />
</UFormGroup>

<UCard :ui="{ body: { padding: '!p-1' } }">
<VerticalNavigationExampleAvatarSlot />
</UCard>
</div>

<div :ref="(el) => (refs[8] = el)" class="col-span-7 row-span-6 animate-bottom">
<UCard :ui="{ body: { padding: '' } }">
<TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
</UCard>
</div>
</ULandingGrid>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
<style scoped lang="postcss">
.animate-top {
animation: translateDown;
}

.animate-bottom {
animation: translateUp;
}

.animate-left {
animation: translateLeft;
}

.animate-right {
animation-name: translateRight;
}

.fade-enter-from,
.fade-leave-to {
opacity: 0;
@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>
Loading