自定义指令

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@unhead/vue": "^2.1.15",
+    "gsap": "^3.15.0",
     "less": "^4.6.4",
     "vite-ssg": "^28.3.0",
     "vue": "^3.5.34",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@unhead/vue':
         specifier: ^2.1.15
         version: 2.1.15(vue@3.5.34(typescript@6.0.3))
+      gsap:
+        specifier: ^3.15.0
+        version: 3.15.0
       less:
         specifier: ^4.6.4
         version: 4.6.4
@@ -458,6 +461,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  gsap@3.15.0:
+    resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
+
   hookable@6.1.1:
     resolution: {integrity: sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==}
 
@@ -1219,6 +1225,8 @@ snapshots:
   graceful-fs@4.2.11:
     optional: true
 
+  gsap@3.15.0: {}
+
   hookable@6.1.1: {}
 
   html-encoding-sniffer@6.0.0:

src/directives/tween-animation.ts

@@ -0,0 +1,29 @@
+import { gsap, } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+export default {
+	name: 'tween-animation',
+	mounted(el: HTMLElement, binding: any) {
+		// if(!binding.value.isGsap)return
+		let dom = document.querySelector('body')
+		gsap.registerPlugin(ScrollTrigger);
+		let tl1 = gsap.timeline();
+		tl1.from(el,1, {y:'30px',opacity:0},)
+		ScrollTrigger.create({
+			trigger: el, // 触发器元素
+			start: "top 90%", // 滚动触发器的起始滚动位置
+			end: '100% 80%',   // 滚动触发器的结束滚动位置
+			markers: false, // 开启标注功能
+			animation:tl1,
+			scroller:dom,//设置指定元素为滚动依据
+			scrub:2,
+			// onUpdate:(v)=>{
+			// 	if(v.progress < 0.1){
+			// 		v.trigger?.classList.remove('active')
+			// 	}else{
+			// 		v.trigger?.classList.add('active')
+			// 		// v.trigger?.classList.add('active')
+			// 	}
+			// }
+		});
+	},
+};

src/main.ts

@@ -4,11 +4,12 @@ import { routes } from './routes'
 import './style.css'
 import directives from './directives/index'
 
-
-// 注册指令
 export const createApp = ViteSSG(App, {
-	routes,
-	base: import.meta.env.BASE_URL,
-}, ({ app }) => {
-	app.use(directives)
-})
+		routes,
+		base: import.meta.env.BASE_URL,
+	},
+	({ app, router, routes, isClient, initialState }) => {
+		// 注册全局指令
+		app.use(directives)
+	}
+)

src/pages/home/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import Video from './video.vue'
+import Product from './product.vue'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="home">
+		<Video />
+		<Product />
+	</div>
+</template>
+<style lang="less" scoped>
+	.home{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>

src/pages/home/product.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { gsap, TweenMax, TweenLite } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<section class="product">
+		<br v-for="item in 50" />
+		<div class="aa" >1231312</div>
+		<div class="aa" v-tween-animation>1231312</div>
+		<br v-for="item in 10" />
+	</section>
+</template>
+<style lang="less" scoped>
+	.product{
+		width: 100%;
+	}
+</style>

src/pages/home/video.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<section class="video">
+		<div class="title">
+		</div>
+	</section>
+</template>
+<style lang="less" scoped>
+	.video{
+	}
+</style>

src/routes.ts

@@ -1,7 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router'
 import AboutView from './pages/AboutView.vue'
 import ContactView from './pages/ContactView.vue'
-import HomeView from './pages/HomeView.vue'
+import HomeView from './pages/home/index.vue'
 import ProductsView from './pages/ProductsView.vue'
 
 export const routes: RouteRecordRaw[] = [