Skip to content

Commit 89e5ccf

Browse files
SaltyFiveSaltyFive
committed
feat: 暴露函数的组合式函数封装
1 parent 19f647a commit 89e5ccf

6 files changed

Lines changed: 52 additions & 55 deletions

File tree

app/components/animate/AnimateSequence.vue renamed to app/components/animate/AnimateHandler.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,6 @@ async function runEnterSequence() {
7070
[container.value!, { opacity: [0, 1], y: ['100vh', 0] }, { at: '0', duration: 0.5 }],
7171
];
7272
await runSequence(seq);
73-
if (props.enterDelay)
74-
await new Promise(resolve => setTimeout(resolve, props.enterDelay));
7573
if (props.enterSequence)
7674
await runSequence(props.enterSequence(), {});
7775
emit('enterComplete');
@@ -86,8 +84,6 @@ async function runExitSequence() {
8684
aniStatus.stage = 'exit';
8785
aniStatus.status = 'running';
8886
emit('exitStart');
89-
if (props.exitDelay)
90-
await new Promise(resolve => setTimeout(resolve, props.exitDelay));
9187
if (props.exitSequence) {
9288
await runSequence(props.exitSequence());
9389
}
@@ -103,8 +99,12 @@ async function runExitSequence() {
10399
async function runFullSequence() {
104100
await runInitSequence();
105101
// console.log('Init Sequence Completed');
102+
if (props.enterDelay)
103+
await new Promise(resolve => setTimeout(resolve, props.enterDelay));
106104
await runEnterSequence();
107105
// console.log('Enter Sequence Completed');
106+
if (props.exitDelay)
107+
await new Promise(resolve => setTimeout(resolve, props.exitDelay));
108108
await runExitSequence();
109109
}
110110

‎app/components/animate/FirstReason.vue‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<AnimateSequence
3-
ref="sequenceRef"
2+
<AnimateHandler
3+
ref="handlerRef"
44
:style="{ opacity: 0 }"
55
class="relative top-0 left-0 w-full h-full"
66
:init-sequence="(): AnimationSequence => [
@@ -49,13 +49,14 @@
4949
<span class="minor-intro-text absolute left-[5%] top-[70%] w-80 h-auto">
5050
{{ description }}
5151
</span>
52-
</AnimateSequence>
52+
</AnimateHandler>
5353
</template>
5454

5555
<script setup lang="ts">
5656
import type { AnimationSequence } from 'motion-v';
5757
import { animate, stagger } from 'motion-v';
58-
import AnimateSequence from './AnimateSequence.vue';
58+
import { useAnimationHandler } from '@/composables/useAnimationHandler';
59+
import AnimateHandler from './AnimateHandler.vue';
5960
6061
defineProps<{
6162
title1: string;
@@ -66,25 +67,12 @@ const emit = defineEmits<{
6667
(e: 'onComplete'): void;
6768
}>();
6869
69-
const sequenceRef = ref<InstanceType<typeof AnimateSequence>>();
70+
const { handlerRef, expose } = useAnimationHandler();
71+
7072
const rotateCircle = ref<HTMLElement>();
7173
const imgBox1 = ref<HTMLElement>();
7274
73-
defineExpose({
74-
playInit: async () => {
75-
sequenceRef.value?.runInitSequence();
76-
},
77-
playEnter: async () => {
78-
sequenceRef.value?.runEnterSequence();
79-
},
80-
playExit: async () => {
81-
sequenceRef.value?.runExitSequence();
82-
},
83-
runFull: async () => {
84-
await sequenceRef.value?.runFullSequence();
85-
},
86-
getStatus: () => sequenceRef.value?.aniStatus,
87-
});
75+
defineExpose(expose);
8876
</script>
8977

9078
<!-- cosmo-only-tailwind-disable -->

‎app/components/animate/SecondReason.vue‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<AnimateSequence
3-
ref="sequenceRef"
2+
<AnimateHandler
3+
ref="handlerRef"
44
:style="{ opacity: 0 }"
55
class="relative top-0 left-0 w-full h-full"
66
:init-sequence="(): AnimationSequence => [
@@ -33,7 +33,7 @@
3333
@exit-start="console.log('Exit Start')"
3434
@exit-complete="console.log('Exit Complete'); emit('onComplete')"
3535
>
36-
<div ref="container" class="relative top-0.5 left-0 w-full h-full">
36+
<div class="relative top-0.5 left-0 w-full h-full">
3737
<svg
3838
class="absolute inset-0 w-full h-full"
3939
viewBox="0 0 100 100"
@@ -74,13 +74,14 @@
7474
{{ description }}
7575
</span>
7676
</div>
77-
</AnimateSequence>
77+
</AnimateHandler>
7878
</template>
7979

8080
<script setup lang="ts">
8181
import type { AnimationSequence } from 'motion-v';
8282
import { stagger } from 'motion-v';
83-
import AnimateSequence from './AnimateSequence.vue';
83+
import { useAnimationHandler } from '~/composables/useAnimationHandler';
84+
import AnimateHandler from './AnimateHandler.vue';
8485
8586
defineProps<{
8687
title1: string;
@@ -91,20 +92,13 @@ const emit = defineEmits<{
9192
(e: 'onComplete'): void;
9293
}>();
9394
94-
const sequenceRef = ref<InstanceType<typeof AnimateSequence>>();
95-
const container = ref<HTMLElement>();
95+
const { handlerRef, expose } = useAnimationHandler();
9696
const line1 = ref<HTMLElement>();
9797
const line2 = ref<HTMLElement>();
9898
const line3 = ref<HTMLElement>();
9999
const imgBox1 = ref<HTMLElement>();
100100
101-
defineExpose({
102-
playInit: async () => sequenceRef.value?.runInitSequence(),
103-
playEnter: async () => sequenceRef.value?.runEnterSequence(),
104-
playExit: async () => sequenceRef.value?.runExitSequence(),
105-
runFull: async () => await sequenceRef.value?.runFullSequence(),
106-
getStatus: () => sequenceRef.value?.aniStatus,
107-
});
101+
defineExpose(expose);
108102
</script>
109103

110104
<!-- cosmo-only-tailwind-disable -->

‎app/components/animate/ThirdReason.vue‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<AnimateSequence
3-
ref="sequenceRef"
2+
<AnimateHandler
3+
ref="handlerRef"
44
:style="{ opacity: 0 }"
55
class="relative top-0 left-0 w-full h-full"
66
:init-sequence="(): AnimationSequence => [
@@ -14,16 +14,19 @@
1414
['.main-intro-text', { opacity: [0, 1], x: [-50, 0] }, { duration: 0.3, delay: stagger(0.1), at: '+0.3', type: 'spring' }],
1515
['.minor-intro-text', { opacity: [0, 1], y: [200, 0] }, { duration: 0.5, at: '+0.4', type: 'spring' }],
1616
[thirdLine, { opacity: [0, 1], x: [-100, 0] }, { duration: 1, at: '<' }],
17-
[thirdLine, { strokeDashoffset: [0, -15] }, { duration: 1, at: '-0.05', repeat: 10, ease: 'linear' }],
1817
]"
1918
:exit-sequence="(): AnimationSequence => [
20-
[thirdLine, { opacity: [1, 0], x: [0, 100] }, { duration: 1, at: '-0.05' }],
19+
[thirdLine, { opacity: [1, 0], x: [0, 100] }, { duration: 1, at: '0.05' }],
2120
['.main-intro-text', { opacity: [1, 0], x: [0, -50] }, { duration: 0.3, at: '+0.2' }],
2221
['.minor-intro-text', { opacity: [1, 0], y: [0, 50] }, { duration: 0.3, at: '+0.1' }],
2322
[imgBox1, { opacity: [1, 0], y: [0, -200], scale: [1, 0.4] }, { duration: 0.4, at: '+0.2' }],
2423
]"
24+
:exit-delay="10000"
2525
@init-complete="console.log('Init Complete')"
26-
@enter-start="() => console.log('Enter Start')"
26+
@enter-start="() => {
27+
console.log('Enter Start')
28+
animate(thirdLine, { strokeDashoffset: [0, -15] }, { duration: 1, repeat: Infinity, ease: 'linear' });
29+
}"
2730
@enter-complete="console.log('Enter Complete')"
2831
@exit-start="console.log('Exit Start')"
2932
@exit-complete="console.log('Exit Complete'); emit('onComplete')"
@@ -58,13 +61,14 @@
5861
一个占位用的，以后存放图片
5962
</div>
6063
</div>
61-
</AnimateSequence>
64+
</AnimateHandler>
6265
</template>
6366

6467
<script setup lang="ts">
6568
import type { AnimationSequence } from 'motion-v';
66-
import { stagger } from 'motion-v';
67-
import AnimateSequence from './AnimateSequence.vue';
69+
import { animate, stagger } from 'motion-v';
70+
import { useAnimationHandler } from '~/composables/useAnimationHandler';
71+
import AnimateHandler from './AnimateHandler.vue';
6872
6973
defineProps<{
7074
title1: string;
@@ -75,18 +79,12 @@ const emit = defineEmits<{
7579
(e: 'onComplete'): void;
7680
}>();
7781
78-
const sequenceRef = ref<InstanceType<typeof AnimateSequence>>();
82+
const { handlerRef, expose } = useAnimationHandler();
7983
const container = ref<HTMLElement>();
8084
const imgBox1 = ref<HTMLElement>();
8185
const thirdLine = ref<HTMLElement>();
8286
83-
defineExpose({
84-
playInit: async () => sequenceRef.value?.runInitSequence?.(),
85-
playEnter: async () => sequenceRef.value?.runEnterSequence?.(),
86-
playExit: async () => sequenceRef.value?.runExitSequence?.(),
87-
runFull: async () => await sequenceRef.value?.runFullSequence?.(),
88-
getStatus: () => sequenceRef.value?.aniStatus,
89-
});
87+
defineExpose(expose);
9088
</script>
9189

9290
<!-- cosmo-only-tailwind-disable -->

‎app/composables/useAnimationHandler.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type AnimationHandler from '@/components/animate/AnimateHandler.vue';
2+
3+
type AnimationHandlerInstance = InstanceType<typeof AnimationHandler>;
4+
5+
export function useAnimationHandler() {
6+
const handlerRef = ref<AnimationHandlerInstance | null>(null);
7+
8+
const expose = {
9+
playInit: async () => { await handlerRef.value?.runInitSequence?.(); },
10+
playEnter: async () => { await handlerRef.value?.runEnterSequence?.(); },
11+
playExit: async () => { await handlerRef.value?.runExitSequence?.(); },
12+
playFull: async () => { await handlerRef.value?.runFullSequence?.(); },
13+
getStatus: () => handlerRef.value?.aniStatus,
14+
};
15+
16+
return { handlerRef, expose };
17+
}

‎app/pages/animate.test.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@ const stage = ref(0);
2020
const sReasonRef = ref<InstanceType<typeof ThirdReason>>();
2121
2222
onMounted(() => {
23-
sReasonRef.value?.runFull();
23+
sReasonRef.value?.playFull();
2424
});
2525
</script>

0 commit comments

Comments
 (0)