liangzejun/palc-newyear2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

完成兑奖页面逻辑

Browse Source
This commit is contained in:
Andy Leong
2024-01-17 17:13:45 +08:00
parent 27b1eab2ce
commit 3291088bca
48 changed files with 372 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/Question.vue
View File

@@ -118,7 +118,10 @@ const showResult = (event) => {
const prevePage = (event) => {
let e = event.target;
debounceTap(e, () => {
gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
// gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
if (currentId.value == 1) {
gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
}
if (currentId.value >= 11) {
resultBtnAni.reverse();
gsap.set(".answer", { pointerEvents: "initial" });
@@ -134,23 +137,25 @@ const prevePage = (event) => {
// 题目过渡动画
const questionEntry = gsap.timeline({
paused: true,
onStart: () => {
gsap.set(".answer-box", { pointerEvents: "none" });
},
// onStart: () => {
// gsap.to('.question-bg', { backgroundPosition: '0px 0px' })
// },
onComplete: () => {
if (currentId.value != 0) {
gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
}
// if (currentId.value != 0) {
// gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
// }
gsap.set(".answer-box", { pointerEvents: "initial" });
},
});
const questionOut = gsap.timeline({
paused: true,
onStart: () => {
// gsap.to('.question-bg', { backgroundPosition: '0px 840px' })
gsap.set(".answer-box", { pointerEvents: "none" });
},
onComplete: () => {
gsap.set(".answer-box", { pointerEvents: "initial" });
},
});
@@ -177,9 +182,22 @@ onMounted(() => {
autoAlpha: 0,
duration: 2,
ease: "slow(0.7,0.7,false)",
onStart: () => {
gsap.to('.question-bg', {
backgroundPosition: '0px 0px',
duration: 1,
ease: "slow(0.7,0.7,false)",
})
},
onComplete: () => {
gsap.set(".answer-box", { pointerEvents: "initial" });
if (currentId.value != 0) {
gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
}
}
},
0.5
);
).to('.answer-0', { duration: 1, y: '-=10px', repeat: -1, yoyo: true }).to('.answer-1', { duration: 1, y: '+=10px', repeat: -1, yoyo: true })
questionEntry.play();
questionOut
@@ -192,6 +210,13 @@ onMounted(() => {
autoAlpha: 0,
duration: 1.5,
ease: "slow(0.7,0.7,false)",
onStart: () => {
gsap.to('.question-bg', {
backgroundPosition: '0px 835px',
duration: 0.75,
ease: "slow(0.7,0.7,false)",
})
},
})
.to(
".answer-1",
@@ -204,15 +229,15 @@ onMounted(() => {
},
1.5
)
.to(
".question-bg",
{
duration: 3,
ease: "slow(0.7,0.7,false)",
background: `linear-gradient(95deg, #f6d365, #fda085)`,
},
1.5
);
// .to(
// ".question-bg",
// {
// duration: 3,
// ease: "slow(0.7,0.7,false)",
// background: `linear-gradient(95deg, #f6d365, #fda085)`,
// },
// 1.5
// );
});
</script>
@@ -228,16 +253,9 @@ onMounted(() => {
</div>
</div>
<div class="answer-box">
<div
class="answer"
v-for="(item, index) in questionList[currentId].answer"
:class="'answer-' + index"
:key="index"
>
<div
class="answer-bg"
:class="activeId == item.aid ? 'active' : ''"
></div>
<div class="answer" v-for="(item, index) in questionList[currentId].answer" :class="'answer-' + index"
:key="index">
<div class="answer-bg" :class="activeId == item.aid ? 'active' : ''"></div>
<div class="answer-text">
<div class="content-before"></div>
<div class="content-after"></div>
@@ -263,7 +281,7 @@ onMounted(() => {
overflow: hidden;
.question-bg {
@include pos(750px, 100%, 0px, 50%);
@include pos(750px, 4500px, 0px, 50%);
transform: translateY(-50%);
background: linear-gradient(135deg, #f6d365, #fda085);
}