scout666/officialWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixbug

Browse Source
This commit is contained in:
scout 2025-02-22 20:17:12 +08:00
parent 914263da37
commit d96827c072
4 changed files with 208 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/views/businessintroduction/size1440/index.vue
View File

@ -27,88 +27,73 @@ const handleTabClick = (tab) => {
currentTab.value = tab;
router.push("/" + tab);
};
watch(
[
() =>
transitionState.transitionComplete,
main,
],
(newValue) => {
if (newValue && main.value) {
ctx = gsap.context((self) => {
// Text animations from left
gsap.utils
.toArray(".text-animate")
.forEach((text) => {
gsap.from(text, {
x: -100,
opacity: 0,
duration: 0.8,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: text,
start: "top 85%",
toggleActions: "play none none reverse",
},
});
});
// Image animations from right
gsap.utils
.toArray(".image-animate")
.forEach((image) => {
gsap.from(image, {
x: 100,
opacity: 0,
duration: 0.8,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: image,
start: "top 85%",
toggleActions: "play none none reverse",
},
});
});
// Float up animations for content sections
gsap.utils.toArray('.float-up').forEach((element) => {
gsap.from(element, {
y: 100,
opacity: 0,
duration: 0.8,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: element,
start: 'top 85%',
toggleActions: "play none none reverse",
}
});
onMounted(() => {
window.scrollTo(0, 0);
// 等待DOM和滚动位置准备好
requestAnimationFrame(() => {
ctx = gsap.context((self) => {
// Text animations from left
gsap.utils.toArray(".text-animate").forEach((text) => {
gsap.from(text, {
x: -100,
opacity: 0,
duration: 0.8,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: text,
start: "top 85%",
toggleActions: "play none none reverse",
},
});
});
// 轮播卡片上升动画
gsap.from('.carousel-item', {
// Image animations from right
gsap.utils.toArray(".image-animate").forEach((image) => {
gsap.from(image, {
x: 100,
opacity: 0,
duration: 0.8,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: image,
start: "top 85%",
toggleActions: "play none none reverse",
},
});
});
// Float up animations for content sections
gsap.utils.toArray('.float-up').forEach((element) => {
gsap.from(element, {
y: 100,
opacity: 0,
duration: 0.8,
stagger: 0.2,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: '.carousel-container',
trigger: element,
start: 'top 85%',
toggleActions: "play none none reverse",
}
});
});
}, main.value);
}
},
{
immediate: true,
}
);
onMounted(() => {
window.scrollTo(0, 0);
// 轮播卡片上升动画
gsap.from('.carousel-item', {
y: 100,
opacity: 0,
duration: 0.8,
stagger: 0.2,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: '.carousel-container',
start: 'top 85%',
toggleActions: "play none none reverse",
}
});
}, main.value);
});
});
onUnmounted(() => {

123
src/views/businessintroduction/size1920/index.vue
View File

@ -27,88 +27,73 @@ const handleTabClick = (tab) => {
currentTab.value = tab;
router.push("/" + tab);
};
watch(
[
() =>
transitionState.transitionComplete,
main,
],
(newValue) => {
if (newValue && main.value) {
ctx = gsap.context((self) => {
// Text animations from left
gsap.utils
.toArray(".text-animate")
.forEach((text) => {
gsap.from(text, {
x: -100,
opacity: 0,
duration: 0.8,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: text,
start: "top 85%",
toggleActions: "play none none reverse",
},
});
});
// Image animations from right
gsap.utils
.toArray(".image-animate")
.forEach((image) => {
gsap.from(image, {
x: 100,
opacity: 0,
duration: 0.8,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: image,
start: "top 85%",
toggleActions: "play none none reverse",
},
});
});
// Float up animations for content sections
gsap.utils.toArray('.float-up').forEach((element) => {
gsap.from(element, {
y: 100,
opacity: 0,
duration: 0.8,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: element,
start: 'top 85%',
toggleActions: "play none none reverse",
}
});
onMounted(() => {
window.scrollTo(0, 0);
// 等待DOM和滚动位置准备好
requestAnimationFrame(() => {
ctx = gsap.context((self) => {
// Text animations from left
gsap.utils.toArray(".text-animate").forEach((text) => {
gsap.from(text, {
x: -100,
opacity: 0,
duration: 0.8,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: text,
start: "top 85%",
toggleActions: "play none none reverse",
},
});
});
// 轮播卡片上升动画
gsap.from('.carousel-item', {
// Image animations from right
gsap.utils.toArray(".image-animate").forEach((image) => {
gsap.from(image, {
x: 100,
opacity: 0,
duration: 0.8,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: image,
start: "top 85%",
toggleActions: "play none none reverse",
},
});
});
// Float up animations for content sections
gsap.utils.toArray('.float-up').forEach((element) => {
gsap.from(element, {
y: 100,
opacity: 0,
duration: 0.8,
stagger: 0.2,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: '.carousel-container',
trigger: element,
start: 'top 85%',
toggleActions: "play none none reverse",
}
});
});
}, main.value);
}
},
{
immediate: true,
}
);
onMounted(() => {
window.scrollTo(0, 0);
// 轮播卡片上升动画
gsap.from('.carousel-item', {
y: 100,
opacity: 0,
duration: 0.8,
stagger: 0.2,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: '.carousel-container',
start: 'top 85%',
toggleActions: "play none none reverse",
}
});
}, main.value);
});
});
onUnmounted(() => {

105
src/views/companyprofil/size1440/index.vue
View File

@ -26,62 +26,7 @@ const handleTabClick = (tab) => {
currentTab.value = tab;
router.push("/" + tab);
};
watch(
[() => transitionState.transitionComplete, main],
(newValue) => {
if (newValue && main.value) {
ctx = gsap.context((self) => {
// Text animations from left
gsap.utils.toArray(".text-animate").forEach((text) => {
gsap.from(text, {
x: -100,
opacity: 0,
duration: 1,
scrollTrigger: {
trigger: text,
start: "top 80%",
end: "top 50%",
toggleActions: "play none none reverse",
},
});
});
// Image animations from right
gsap.utils.toArray(".image-animate").forEach((image) => {
gsap.from(image, {
x: 100,
opacity: 0,
duration: 1,
scrollTrigger: {
trigger: image,
start: "top 80%",
end: "top 50%",
toggleActions: "play none none reverse",
},
});
});
// 轮播卡片上升动画
gsap.from(".carousel-item", {
y: 100,
opacity: 0,
duration: 1.5,
stagger: 0.4,
scrollTrigger: {
trigger: ".carousel-container",
start: "top 70%",
end: "top 30%",
scrub: 2,
toggleActions: "restart pause reverse pause",
},
});
}, main.value);
}
},
{
immediate: true,
}
);
// 向前滑动
const handlePrev = () => {
if (!carouselTrack.value) return;
@ -252,6 +197,56 @@ const handleCarouselClick = (item, event) => {
};
onMounted(() => {
window.scrollTo(0, 0);
// 等待DOM和滚动位置准备好
requestAnimationFrame(() => {
ctx = gsap.context((self) => {
// Text animations from left
gsap.utils.toArray(".text-animate").forEach((text) => {
gsap.from(text, {
x: -100,
opacity: 0,
duration: 1,
scrollTrigger: {
trigger: text,
start: "top 80%",
end: "top 50%",
toggleActions: "play none none reverse",
},
});
});
// Image animations from right
gsap.utils.toArray(".image-animate").forEach((image) => {
gsap.from(image, {
x: 100,
opacity: 0,
duration: 1,
scrollTrigger: {
trigger: image,
start: "top 80%",
end: "top 50%",
toggleActions: "play none none reverse",
},
});
});
// 轮播卡片上升动画
gsap.from(".carousel-item", {
y: 100,
opacity: 0,
duration: 1.5,
stagger: 0.4,
scrollTrigger: {
trigger: ".carousel-container",
start: "top 70%",
end: "top 30%",
scrub: 2,
toggleActions: "restart pause reverse pause",
},
});
}, main.value);
});
});
onUnmounted(() => {
ctx?.revert(); // <- Easy Cleanup!

105
src/views/companyprofil/size1920/index.vue
View File

@ -26,62 +26,7 @@ const handleTabClick = (tab) => {
currentTab.value = tab;
router.push("/" + tab);
};
watch(
[() => transitionState.transitionComplete, main],
(newValue) => {
if (newValue && main.value) {
ctx = gsap.context((self) => {
// Text animations from left
gsap.utils.toArray(".text-animate").forEach((text) => {
gsap.from(text, {
x: -100,
opacity: 0,
duration: 1,
scrollTrigger: {
trigger: text,
start: "top 80%",
end: "top 50%",
toggleActions: "play none none reverse",
},
});
});
// Image animations from right
gsap.utils.toArray(".image-animate").forEach((image) => {
gsap.from(image, {
x: 100,
opacity: 0,
duration: 1,
scrollTrigger: {
trigger: image,
start: "top 80%",
end: "top 50%",
toggleActions: "play none none reverse",
},
});
});
// 轮播卡片上升动画
gsap.from(".carousel-item", {
y: 100,
opacity: 0,
duration: 1.5,
stagger: 0.4,
scrollTrigger: {
trigger: ".carousel-container",
start: "top 70%",
end: "top 30%",
scrub: 2,
toggleActions: "restart pause reverse pause",
},
});
}, main.value);
}
},
{
immediate: true,
}
);
// 向前滑动
const handlePrev = () => {
if (!carouselTrack.value) return;
@ -252,6 +197,56 @@ const handleCarouselClick = (item, event) => {
};
onMounted(() => {
window.scrollTo(0, 0);
// 等待DOM和滚动位置准备好
requestAnimationFrame(() => {
ctx = gsap.context((self) => {
// Text animations from left
gsap.utils.toArray(".text-animate").forEach((text) => {
gsap.from(text, {
x: -100,
opacity: 0,
duration: 1,
scrollTrigger: {
trigger: text,
start: "top 80%",
end: "top 50%",
toggleActions: "play none none reverse",
},
});
});
// Image animations from right
gsap.utils.toArray(".image-animate").forEach((image) => {
gsap.from(image, {
x: 100,
opacity: 0,
duration: 1,
scrollTrigger: {
trigger: image,
start: "top 80%",
end: "top 50%",
toggleActions: "play none none reverse",
},
});
});
// 轮播卡片上升动画
gsap.from(".carousel-item", {
y: 100,
opacity: 0,
duration: 1.5,
stagger: 0.4,
scrollTrigger: {
trigger: ".carousel-container",
start: "top 70%",
end: "top 30%",
scrub: 2,
toggleActions: "restart pause reverse pause",
},
});
}, main.value);
});
});
onUnmounted(() => {
ctx?.revert(); // <- Easy Cleanup!