动画

src/directives/custom-animation.js

@@ -87,7 +87,7 @@ function add(el, root = document) {
 		obj.observer.observe(el)
 		return
 	}
-	resize.observe(root)
+	resize.observe(isDocumentRoot(root))
 	root.addEventListener('scroll', handleScroll)
 	const observer = new IntersectionObserver((entries) => {
 		entries.forEach((entry) => {
@@ -112,7 +112,7 @@ function remove(el, root = document) {
 	}
 	if (obj.els.length === 0) {
 		obj.observer.disconnect()
-		resize.unobserve(root)
+		resize.unobserve(isDocumentRoot(root))
 		root.removeEventListener('scroll', handleScroll)
 		roots.delete(root)
 	}
@@ -130,8 +130,9 @@ async function handleScroll({ target: root }) {
 		if (!item.scroll) return
 		const children = el.querySelectorAll(typesStr)
 		if (children.length === 0) return
-		const elTop_bottom = root.offsetHeight - (el.offsetTop - root.offsetTop - root.scrollTop)
-		const maxHeight = root.offsetHeight + el.offsetHeight
+		const rootEl = isDocumentRoot(root)
+		const elTop_bottom = rootEl.offsetHeight - (el.offsetTop - rootEl.offsetTop - rootEl.scrollTop)
+		const maxHeight = rootEl.offsetHeight + el.offsetHeight
 		const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight))		
 		children.forEach((item) => {
 			item.style.transition = 'transform 0.5s ease-out'
@@ -166,3 +167,7 @@ function hasAttr(el, attr) {
 		return el.hasAttribute(attr)
 	}
 }
+// 检查document是否为根元素
+function isDocumentRoot(root) {
+	return root === document ? document.documentElement : root
+}

src/directives/index.ts

@@ -2,7 +2,9 @@ import type { App } from 'vue'
 
 export default {
 	install(app: App) {
-		const directivesList = import.meta.glob('./*.ts', { eager: true }) as any;
+		const directivesList1 = import.meta.glob('./*.ts', { eager: true }) as any;
+		const directivesList2 = import.meta.glob('./*.js', { eager: true }) as any;
+		const directivesList = { ...directivesList1, ...directivesList2 };
 		Object.keys(directivesList).forEach(key => {
 			app.directive(directivesList[key].default.name, directivesList[key].default);
 		});

src/pages/home/components/ProductFeature.vue

@@ -18,13 +18,15 @@
 </script>
 
 <template>
-	<section class="product-feature" :class="{ 'product-feature-reversed': reversed }">
+	<section class="product-feature" :class="{ 'product-feature-reversed': reversed }" v-custom-animation.scroll>
 		<div class="product-feature-art">
 			<img
 				class="product-feature-bg"
 				:src="backgroundImage"
 				:alt="backgroundAlt"
 				loading="lazy"
+				translate-x-s="-100"
+				translate-x="100"
 			/>
 			<img class="product-feature-panel" :src="panelImage" :alt="panelAlt" loading="lazy" />
 		</div>