diff --git a/src/components/ShootProgress.vue b/src/components/ShootProgress.vue index 3a84962..350472e 100644 --- a/src/components/ShootProgress.vue +++ b/src/components/ShootProgress.vue @@ -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, }" /> 剩余{{ remain }}秒 @@ -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; diff --git a/src/components/ShootProgress2.vue b/src/components/ShootProgress2.vue index 2c677ba..85709be 100644 --- a/src/components/ShootProgress2.vue +++ b/src/components/ShootProgress2.vue @@ -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, }" /> 剩余{{ remain }}秒 @@ -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;