docs: remove transitions

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2022-12-27 13:22:04 +01:00
parent df58e4fc72
commit da9ec23188
2 changed files with 16 additions and 24 deletions

View File

@@ -29,29 +29,21 @@ onBeforeUnmount(stop)
<div
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
>
<XyzTransition appear-visible xyz="fade down ease-out-back">
<div class="flex flex-col md:flex-row gap-12 md:gap-24">
<Basic @pane="onLoad" />
</div>
</XyzTransition>
<div class="flex flex-col md:flex-row gap-12 md:gap-24">
<Basic @pane="onLoad" />
</div>
<XyzTransition appear-visible xyz="fade down ease-out-back">
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
<RGB @pane="onLoad" />
</div>
</XyzTransition>
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
<RGB @pane="onLoad" />
</div>
<XyzTransition appear-visible xyz="fade down ease-out-back">
<div class="flex flex-col md:flex-row flex-unwrap gap-12 md:gap-24">
<Nested @pane="onLoad" />
</div>
</XyzTransition>
<div class="flex flex-col md:flex-row flex-unwrap gap-12 md:gap-24">
<Nested @pane="onLoad" />
</div>
<XyzTransition appear-visible xyz="fade down ease-out-back">
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
<Additional @pane="onLoad" />
</div>
</XyzTransition>
<div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
<Additional @pane="onLoad" />
</div>
</div>
</div>
</template>

View File

@@ -257,7 +257,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
y="0"
width="50"
height="50"
></rect>
/>
<rect
:class="animations[1].className"
:style="{ '--animation-duration': `${animations[1].duration}s` }"
@@ -265,7 +265,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
y="100"
width="50"
height="50"
></rect>
/>
<rect
:class="animations[2].className"
:style="{ '--animation-duration': `${animations[2].duration}s` }"
@@ -273,7 +273,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
y="0"
width="50"
height="50"
></rect>
/>
<rect
:class="animations[3].className"
:style="{ '--animation-duration': `${animations[3].duration}s` }"
@@ -281,7 +281,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
y="100"
width="50"
height="50"
></rect>
/>
</pattern>
</template>
</Background>