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;