Skip to content

Commit 7db0be7

Browse files
BobbieGoedeBobbieGoede
committed
doc: add animations
1 parent 093925a commit 7db0be7

File tree

12 files changed

+209
-16
lines changed

12 files changed

+209
-16
lines changed

‎docs/components/content/PresetSection.vue

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ const isReplaying = ref(false)
1818
const replayButton = ref<SVGElement>()
1919
const demoElement = ref<HTMLElement>()
2020
21-
const { apply, set } = useMotion(demoElement, props.preset)
21+
const { apply, set } = useMotion(demoElement, {
22+
...props.preset,
23+
duration: 2000,
24+
})
2225
2326
const replayInstance = useMotion(replayButton, {
2427
initial: {
@@ -38,14 +41,11 @@ async function replay() {
3841
3942
await set(props.preset.initial)
4043
41-
if (props.preset.visible)
42-
await apply(props.preset.visible)
44+
if (props.preset.visible) await apply(props.preset.visible)
4345
44-
if (props.preset.visibleOnce)
45-
await apply(props.preset.visibleOnce)
46+
if (props.preset.visibleOnce) await apply(props.preset.visibleOnce)
4647
47-
if (props.preset.enter)
48-
await apply(props.preset.enter)
48+
if (props.preset.enter) await apply(props.preset.enter)
4949
5050
isReplaying.value = false
5151
}
@@ -75,11 +75,16 @@ const { data } = await useAsyncData(`preset-${props.name}`, () =>
7575
],
7676
`::`,
7777
].join('\n'),
78-
))
78+
),
79+
)
7980
</script>
8081

8182
<template>
82-
<div class="presetSection">
83+
<Motion
84+
class="presetSection"
85+
:initial="{ y: 100, opacity: 0 }"
86+
:visible-once="{ y: 0, opacity: 1 }"
87+
>
8388
<ProseH3 :id="name" class="capitalize">
8489
{{ name.replace(/[A-Z]/g, (s: any) => ` ${s}`) }}
8590
</ProseH3>
@@ -100,7 +105,7 @@ const { data } = await useAsyncData(`preset-${props.name}`, () =>
100105
</client-only>
101106
</div>
102107
</div>
103-
</div>
108+
</Motion>
104109
</template>
105110

106111
<style scoped>

‎docs/components/content/ProseA.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<Motion
3+
:initial="{ y: '1em', opacity: 0 }"
4+
:visible-once="{ y: '0em', opacity: 1 }"
5+
is="span"
6+
style="display: inline-block"
7+
>
8+
<NuxtLink :href="href" :target="target">
9+
<slot />
10+
</NuxtLink>
11+
</Motion>
12+
</template>
13+
14+
<script setup lang="ts">
15+
import type { PropType } from 'vue'
16+
17+
defineProps({
18+
href: {
19+
type: String,
20+
default: '',
21+
},
22+
target: {
23+
type: String as PropType<
24+
| '_blank'
25+
| '_parent'
26+
| '_self'
27+
| '_top'
28+
| (string & object)
29+
| null
30+
| undefined
31+
>,
32+
default: undefined,
33+
required: false,
34+
},
35+
})
36+
</script>

‎docs/components/content/ProseCode.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<Motion
3+
is="code"
4+
:initial="{ y: 100, opacity: 0 }"
5+
:visible-once="{ y: 0, opacity: 1 }"
6+
><slot
7+
/></Motion>
8+
</template>

‎docs/components/content/ProseH1.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<Motion
3+
is="h1"
4+
:initial="{ y: 100, opacity: 0 }"
5+
:visible-once="{ y: 0, opacity: 1 }"
6+
><slot
7+
/></Motion>
8+
</template>

‎docs/components/content/ProseH2.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<Motion
3+
is="h2"
4+
:initial="{ y: 100, opacity: 0 }"
5+
:visible-once="{ y: 0, opacity: 1 }"
6+
><slot
7+
/></Motion>
8+
</template>

‎docs/components/content/ProseH3.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<Motion
3+
is="h3"
4+
:initial="{ y: 100, opacity: 0 }"
5+
:visible-once="{ y: 0, opacity: 1 }"
6+
><slot
7+
/></Motion>
8+
</template>

‎docs/components/content/ProseH4.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<Motion
3+
is="h4"
4+
:initial="{ y: 100, opacity: 0 }"
5+
:visible-once="{ y: 0, opacity: 1 }"
6+
><slot
7+
/></Motion>
8+
</template>

‎docs/components/content/ProseH5.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<Motion
3+
is="h5"
4+
:initial="{ y: 100, opacity: 0 }"
5+
:visible-once="{ y: 0, opacity: 1 }"
6+
><slot
7+
/></Motion>
8+
</template>

‎docs/components/content/ProseP.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<Motion
3+
is="p"
4+
:initial="{ y: 100, opacity: 0 }"
5+
:visible-once="{ y: 0, opacity: 1 }"
6+
><slot
7+
/></Motion>
8+
</template>

‎docs/components/content/ProsePre.vue

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<Motion
3+
is="pre"
4+
:initial="{ y: 100, opacity: 0 }"
5+
:visible-once="{ y: 0, opacity: 1 }"
6+
:class="$props.class"
7+
><slot
8+
/></Motion>
9+
</template>
10+
11+
<script setup lang="ts">
12+
defineProps({
13+
code: {
14+
type: String,
15+
default: '',
16+
},
17+
language: {
18+
type: String,
19+
default: null,
20+
},
21+
filename: {
22+
type: String,
23+
default: null,
24+
},
25+
highlights: {
26+
type: Array as () => number[],
27+
default: () => [],
28+
},
29+
meta: {
30+
type: String,
31+
default: null,
32+
},
33+
class: {
34+
type: String,
35+
default: null,
36+
},
37+
})
38+
</script>
39+
40+
<style>
41+
pre code .line {
42+
display: block;
43+
}
44+
</style>

0 commit comments

Comments
 (0)