From 6ad308b55c511a494975cc2e5e7224b974837ba5 Mon Sep 17 00:00:00 2001 From: Aleksa Date: Sun, 5 Mar 2023 10:49:02 +0100 Subject: [PATCH 1/5] refactor: attach ref to wrapper div --- src/runtime/components/IonAnimation.vue | 43 ++++++++++++++----------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/src/runtime/components/IonAnimation.vue b/src/runtime/components/IonAnimation.vue index 4d562d35..24cdebe6 100644 --- a/src/runtime/components/IonAnimation.vue +++ b/src/runtime/components/IonAnimation.vue @@ -30,17 +30,17 @@ interface AnimationOptions { easing?: string fill?: AnimationFill direction?: AnimationDirection - from?: AnimationFromObject | AnimationFromObject[] - fromTo?: AnimationFromToObject | AnimationFromToObject[] - keyframes?: AnimationKeyFrames + from?: AnimationFromObject | AnimationFromObject[] | null + fromTo?: AnimationFromToObject | AnimationFromToObject[] | null + keyframes?: AnimationKeyFrames | null playOnMount?: boolean playOnVisible?: boolean - beforeStyles?: AnimationStyles - beforeAddClass?: string | string[] - beforeClearStyles?: string[] - afterStyles?: AnimationStyles - afterAddClass?: string | string[] - afterClearStyles?: string[] + beforeStyles?: AnimationStyles | null + beforeAddClass?: string | string[] | null + beforeClearStyles?: string[] | null + afterStyles?: AnimationStyles | null + afterAddClass?: string | string[] | null + afterClearStyles?: string[] | null } const props = withDefaults(defineProps(), { @@ -63,13 +63,15 @@ const props = withDefaults(defineProps(), { afterClearStyles: null, }) -const element = ref(null) +const element = ref(null as any) -const animation = ref(null) +const animation = ref(createAnimation(props.id)) + +let observer: IntersectionObserver onMounted(() => { animation.value = createAnimation(props.id) - .addElement(element.value) + .addElement(element.value!) .duration(props.duration) .iterations(props.iterations) .easing(props.easing) @@ -83,10 +85,12 @@ onMounted(() => { .afterAddClass(props.afterAddClass ?? []) .afterClearStyles(props.afterClearStyles ?? []) + console.log(animation.value) + let hasKeyframes = Array.isArray(props.keyframes) && props.keyframes.length > 0 if (hasKeyframes) { - animation.value.keyframes(props.keyframes) + animation.value.keyframes(props.keyframes!) } // From @@ -112,7 +116,7 @@ onMounted(() => { } if (props.playOnVisible && !props.playOnMount) { - const observer = new IntersectionObserver( + observer = new IntersectionObserver( () => { // Play animation animation.value.play() @@ -127,17 +131,18 @@ onMounted(() => { } ) // Start observing for animation element - observer.observe(element.value) - - // Disconnect observer when component is about to be unmounted - onBeforeUnmount(() => observer.disconnect()) + observer.observe(element.value!) } else if (props.playOnMount) animation.value.play() }) onBeforeUnmount(() => { + //Destroy animation and disconnect observer when component is about to be unmounted if it is defined animation.value.destroy() + if (observer) observer.disconnect() }) From 6dab0363e8cc3cfe15bb4a2ff4e42b0032633ddd Mon Sep 17 00:00:00 2001 From: Aleksa Date: Sun, 5 Mar 2023 10:49:18 +0100 Subject: [PATCH 2/5] chore: add animation IDs to playground example --- playground/pages/tabs/tab4.vue | 128 ++++++++++++--------------------- 1 file changed, 46 insertions(+), 82 deletions(-) diff --git a/playground/pages/tabs/tab4.vue b/playground/pages/tabs/tab4.vue index 6af6d3db..ebb82e7d 100644 --- a/playground/pages/tabs/tab4.vue +++ b/playground/pages/tabs/tab4.vue @@ -17,16 +17,10 @@ Basic animation - +
@@ -41,17 +35,12 @@ Keyframes animation - +
@@ -66,16 +55,11 @@ Animation that repeats forever - +
@@ -90,24 +74,15 @@ Animation with style hooks - +
@@ -122,25 +97,20 @@ Animation with specific easing - +
@@ -155,19 +125,13 @@ Reversed animation direction - +
@@ -194,7 +158,7 @@ text-align: center; } -.animations-grid > *:nth-child(2) { +.animations-grid>*:nth-child(2) { margin-left: auto; margin-right: auto; } From d9ea2ea3c47810903765a3e642b4a934b8f7fe6e Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 28 Mar 2023 18:10:19 +0100 Subject: [PATCH 3/5] style: lint --- playground/pages/tabs/tab4.vue | 133 +++++++++++++++++++++------------ 1 file changed, 87 insertions(+), 46 deletions(-) diff --git a/playground/pages/tabs/tab4.vue b/playground/pages/tabs/tab4.vue index ebb82e7d..397821c1 100644 --- a/playground/pages/tabs/tab4.vue +++ b/playground/pages/tabs/tab4.vue @@ -17,10 +17,16 @@ Basic animation - +
@@ -35,12 +41,18 @@ Keyframes animation - +
@@ -55,11 +67,17 @@ Animation that repeats forever - +
@@ -74,15 +92,25 @@ Animation with style hooks - +
@@ -97,20 +125,26 @@ Animation with specific easing - +
@@ -125,13 +159,20 @@ Reversed animation direction - +
@@ -158,7 +199,7 @@ text-align: center; } -.animations-grid>*:nth-child(2) { +.animations-grid > *:nth-child(2) { margin-left: auto; margin-right: auto; } From 20edeb379cda3c65d80a29d490e295f13c362387 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 28 Mar 2023 18:11:48 +0100 Subject: [PATCH 4/5] chore: remove console.log and `any` --- src/runtime/components/IonAnimation.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/runtime/components/IonAnimation.vue b/src/runtime/components/IonAnimation.vue index 24cdebe6..32dde0e3 100644 --- a/src/runtime/components/IonAnimation.vue +++ b/src/runtime/components/IonAnimation.vue @@ -63,7 +63,7 @@ const props = withDefaults(defineProps(), { afterClearStyles: null, }) -const element = ref(null as any) +const element = ref(null) const animation = ref(createAnimation(props.id)) @@ -85,8 +85,6 @@ onMounted(() => { .afterAddClass(props.afterAddClass ?? []) .afterClearStyles(props.afterClearStyles ?? []) - console.log(animation.value) - let hasKeyframes = Array.isArray(props.keyframes) && props.keyframes.length > 0 if (hasKeyframes) { From a6cb0322d0a22af0da79aa354309ddde33f1c267 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 28 Mar 2023 18:18:02 +0100 Subject: [PATCH 5/5] fix: avoid creating animation until mounted --- src/runtime/components/IonAnimation.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/runtime/components/IonAnimation.vue b/src/runtime/components/IonAnimation.vue index 32dde0e3..9cd88ff9 100644 --- a/src/runtime/components/IonAnimation.vue +++ b/src/runtime/components/IonAnimation.vue @@ -65,7 +65,7 @@ const props = withDefaults(defineProps(), { const element = ref(null) -const animation = ref(createAnimation(props.id)) +const animation = ref(null) let observer: IntersectionObserver @@ -95,7 +95,7 @@ onMounted(() => { if (props.from !== null && !hasKeyframes) { if (Array.isArray(props.from)) { props.from.forEach(({ property, fromValue }) => { - animation.value.from(property, fromValue) + animation.value!.from(property, fromValue) }) } else { animation.value.from(props.from.property, props.from.fromValue) @@ -106,7 +106,7 @@ onMounted(() => { if (props.fromTo !== null && !hasKeyframes) { if (Array.isArray(props.fromTo)) { props.fromTo.forEach(({ property, fromValue, toValue }) => { - animation.value.fromTo(property, fromValue, toValue) + animation.value!.fromTo(property, fromValue, toValue) }) } else { animation.value.fromTo(props.fromTo.property, props.fromTo.fromValue, props.fromTo.toValue) @@ -117,7 +117,7 @@ onMounted(() => { observer = new IntersectionObserver( () => { // Play animation - animation.value.play() + animation.value!.play() // Disconnect observer - making animation always trigger ONLY ONCE observer.disconnect() }, @@ -134,7 +134,7 @@ onMounted(() => { }) onBeforeUnmount(() => { //Destroy animation and disconnect observer when component is about to be unmounted if it is defined - animation.value.destroy() + animation.value?.destroy() if (observer) observer.disconnect() })