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

chore(docs): set transition mode

Browse Source
This commit is contained in:
bcakmakoglu
2022-06-26 18:10:59 +02:00
committed by Braks
parent 48dc16cf73
commit e02297875d
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/flows/Intro.vue
+19 -3
View File
@@ -240,7 +240,7 @@ 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">
<XyzTransition xyz="fade down ease-out-back duration-10"> <XyzTransition xyz="fade down ease-out-back duration-10" mode="out-in">
<Background v-if="animatedBackground"> <Background v-if="animatedBackground">
<template #pattern-container="{ id }"> <template #pattern-container="{ id }">
<pattern :id="id" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"> <pattern :id="id" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
@@ -280,7 +280,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
</template> </template>
</Background> </Background>
</XyzTransition> </XyzTransition>
<XyzTransition xyz="fade down ease-out-back duration-20"> <XyzTransition xyz="fade down ease-out-back duration-20" mode="out-in">
<Background <Background
v-if="!animatedBackground" v-if="!animatedBackground"
variant="lines" variant="lines"
@@ -295,7 +295,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
<div class="box max-w-[500px]"> <div class="box max-w-[500px]">
<div class="intro px-4 py-2 shadow-lg rounded-md border-2 border-solid border-black"> <div class="intro px-4 py-2 shadow-lg rounded-md border-2 border-solid border-black">
<div class="font-mono flex flex-col gap-4 p-4 items-center text-center"> <div class="font-mono flex flex-col gap-4 p-4 items-center text-center">
<h1 class="text-2xl lg:text-4xl">Vue Flow</h1> <h1 class="text-2xl lg:text-4xl !my-0 !pt-0 font-bold">Vue Flow</h1>
<h2 class="text-lg lg:text-xl font-normal !border-0"> <h2 class="text-lg lg:text-xl font-normal !border-0">
The customizable Vue 3 component bringing interactivity to flowcharts and graphs. The customizable Vue 3 component bringing interactivity to flowcharts and graphs.
</h2> </h2>
@@ -333,18 +333,34 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
animation: fill-green-blue var(--animation-duration) alternate infinite; animation: fill-green-blue var(--animation-duration) alternate infinite;
} }
.checker-gb path {
animation: fill-green-blue var(--animation-duration) alternate infinite;
}
.checker-op { .checker-op {
animation: fill-orange-purple var(--animation-duration) alternate infinite; animation: fill-orange-purple var(--animation-duration) alternate infinite;
} }
.checker-op path {
animation: fill-orange-purple var(--animation-duration) alternate infinite;
}
.checker-yg { .checker-yg {
animation: fill-yellow-green var(--animation-duration) alternate infinite; animation: fill-yellow-green var(--animation-duration) alternate infinite;
} }
.checker-yg path {
animation: fill-yellow-green var(--animation-duration) alternate infinite;
}
.checker-ss { .checker-ss {
animation: fill-sky-red var(--animation-duration) alternate infinite; animation: fill-sky-red var(--animation-duration) alternate infinite;
} }
.checker-ss path {
animation: fill-sky-red var(--animation-duration) alternate infinite;
}
@keyframes fill-green-blue { @keyframes fill-green-blue {
0% { 0% {
@apply fill-transparent; @apply fill-transparent;