pref: 进度条变化

This commit is contained in:
2026-05-06 17:57:02 +08:00
parent 1beb1009b3
commit 9a5d64cc9e
2 changed files with 30 additions and 6 deletions

View File

@@ -53,6 +53,7 @@ const currentRoundEnded = ref(false);
const ended = ref(false);
const halfTime = ref(false);
const wait = ref(0);
const transitionStyle = ref("all 1s linear");
watch(
() => props.tips,
@@ -81,7 +82,19 @@ watch(
const resetTimer = (count) => {
if (timer.value) clearInterval(timer.value);
remain.value = Math.round(count);
const newVal = Math.round(count);
// 如果剩余时间增加(如重置),瞬间变化无动画
if (newVal >= remain.value) {
transitionStyle.value = "none";
remain.value = newVal;
setTimeout(() => {
transitionStyle.value = "all 1s linear";
}, 50);
} else {
remain.value = newVal;
}
if (remain.value > 0) {
timer.value = setInterval(() => {
if (remain.value === 0) {
@@ -188,6 +201,7 @@ onBeforeUnmount(() => {
width: `${(remain / total) * 100}%`,
backgroundColor: barColor,
right: tips.includes('红队') ? 0 : 'unset',
transition: transitionStyle,
}"
/>
<text>剩余{{ remain }}</text>
@@ -242,7 +256,6 @@ onBeforeUnmount(() => {
height: 15px;
border-radius: 15px;
z-index: -1;
transition: all 1s linear;
}
.container > view:last-child > text {
font-size: 10px;

View File

@@ -20,12 +20,23 @@ const barColor = ref("");
const remain = ref(15);
const timer = ref(null);
const laoding = ref(false);
const transitionStyle = ref("all 1s linear");
const updateRemain = (value) => {
// if (Math.ceil(value) === remain.value || Math.floor(value) === remain.value)
// return;
if (timer.value) clearInterval(timer.value);
remain.value = Math.round(value);
const newVal = Math.round(value);
// 如果剩余时间增加(如轮次切换重置),瞬间变化无动画;否则保持动画
if (newVal >= remain.value) {
transitionStyle.value = "none";
remain.value = newVal;
setTimeout(() => {
transitionStyle.value = "all 1s linear";
}, 50);
} else {
remain.value = newVal;
}
timer.value = setInterval(() => {
laoding.value = remain.value === 0;
if (remain.value > 0) remain.value--;
@@ -72,6 +83,7 @@ onBeforeUnmount(() => {
width: `${(remain / total) * 100}%`,
background: barColor,
right: tips.includes('红队') ? 0 : 'unset',
transition: transitionStyle,
}"
/>
<text v-if="!laoding">剩余{{ remain }}</text>
@@ -106,7 +118,6 @@ onBeforeUnmount(() => {
.container > view:last-child > view {
height: 24rpx;
border-radius: 15px;
transition: all 1s linear;
}
.container > view:last-child > text {
font-size: 18rpx;