alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(docs): enable animated background on intro node click

Browse Source
This commit is contained in:
bcakmakoglu
2022-06-25 00:36:48 +02:00
committed by Braks
parent 6e2ae482b5
commit 07e7484420
1 changed files with 68 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/flows/Intro.vue
+68 -42
View File
@@ -9,6 +9,7 @@ import Heart from '~icons/mdi/heart'
const breakpoints = useBreakpoints(breakpointsTailwind) const breakpoints = useBreakpoints(breakpointsTailwind)
const dark = ref(false) const dark = ref(false)
const animatedBackground = ref(false)
onMounted(() => { onMounted(() => {
const html = document.getElementsByTagName('html')![0] const html = document.getElementsByTagName('html')![0]
@@ -84,6 +85,8 @@ onNodeClick(async ({ node }) => {
if (node.id === 'intro') { if (node.id === 'intro') {
if (disabled.value) return if (disabled.value) return
animatedBackground.value = !animatedBackground.value
if (clickInterval.value) { if (clickInterval.value) {
clearInterval(clickInterval.value) clearInterval(clickInterval.value)
} }
@@ -243,44 +246,55 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
<template> <template>
<VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out"> <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
<Background> <XyzTransition xyz="fade down ease-out-back duration-10">
<template #pattern-container="{ id }"> <Background v-if="animatedBackground">
<pattern :id="id" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"> <template #pattern-container="{ id }">
<rect <pattern :id="id" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
:class="animations[0].className" <rect
:style="{ '--animation-duration': `${animations[0].duration}s` }" :class="animations[0].className"
x="0" :style="{ '--animation-duration': `${animations[0].duration}s` }"
y="0" x="0"
width="50" y="0"
height="50" width="50"
></rect> height="50"
<rect ></rect>
:class="animations[1].className" <rect
:style="{ '--animation-duration': `${animations[1].duration}s` }" :class="animations[1].className"
x="0" :style="{ '--animation-duration': `${animations[1].duration}s` }"
y="100" x="0"
width="50" y="100"
height="50" width="50"
></rect> height="50"
<rect ></rect>
:class="animations[2].className" <rect
:style="{ '--animation-duration': `${animations[2].duration}s` }" :class="animations[2].className"
x="100" :style="{ '--animation-duration': `${animations[2].duration}s` }"
y="0" x="100"
width="50" y="0"
height="50" width="50"
></rect> height="50"
<rect ></rect>
:class="animations[3].className" <rect
:style="{ '--animation-duration': `${animations[3].duration}s` }" :class="animations[3].className"
x="100" :style="{ '--animation-duration': `${animations[3].duration}s` }"
y="100" x="100"
width="50" y="100"
height="50" width="50"
></rect> height="50"
</pattern> ></rect>
</template> </pattern>
</Background> </template>
</Background>
</XyzTransition>
<XyzTransition xyz="fade down ease-out-back duration-20">
<Background
v-if="!animatedBackground"
variant="lines"
:pattern-color="dark ? '#ffffff' : '#000000'"
:size="0.7"
:gap="100"
/>
</XyzTransition>
<template #node-box="props"> <template #node-box="props">
<template v-if="props.id === 'intro'"> <template v-if="props.id === 'intro'">
@@ -339,9 +353,12 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
@keyframes fill-green-blue { @keyframes fill-green-blue {
0% { 0% {
@apply fill-transparent;
}
35% {
@apply fill-green-500/50; @apply fill-green-500/50;
} }
50% { 65% {
@apply fill-transparent; @apply fill-transparent;
} }
100% { 100% {
@@ -351,9 +368,12 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
@keyframes fill-orange-purple { @keyframes fill-orange-purple {
0% { 0% {
@apply fill-transparent;
}
35% {
@apply fill-orange-500/50; @apply fill-orange-500/50;
} }
50% { 65% {
@apply fill-transparent; @apply fill-transparent;
} }
100% { 100% {
@@ -363,9 +383,12 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
@keyframes fill-yellow-green { @keyframes fill-yellow-green {
0% { 0% {
@apply fill-transparent;
}
35% {
@apply fill-yellow-500/50; @apply fill-yellow-500/50;
} }
50% { 65% {
@apply fill-transparent; @apply fill-transparent;
} }
100% { 100% {
@@ -375,9 +398,12 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
@keyframes fill-sky-red { @keyframes fill-sky-red {
0% { 0% {
@apply fill-transparent;
}
35% {
@apply fill-sky-500/50; @apply fill-sky-500/50;
} }
50% { 65% {
@apply fill-transparent; @apply fill-transparent;
} }
100% { 100% {