Merge branch 'new-race-mode' of https://git.shelingxingqiu.com/laoma/shoot-miniprograms into new-race-mode
This commit is contained in:
@@ -53,6 +53,7 @@ const currentRoundEnded = ref(false);
|
|||||||
const ended = ref(false);
|
const ended = ref(false);
|
||||||
const halfTime = ref(false);
|
const halfTime = ref(false);
|
||||||
const wait = ref(0);
|
const wait = ref(0);
|
||||||
|
const transitionStyle = ref("all 1s linear");
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.tips,
|
() => props.tips,
|
||||||
@@ -81,7 +82,19 @@ watch(
|
|||||||
|
|
||||||
const resetTimer = (count) => {
|
const resetTimer = (count) => {
|
||||||
if (timer.value) clearInterval(timer.value);
|
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) {
|
if (remain.value > 0) {
|
||||||
timer.value = setInterval(() => {
|
timer.value = setInterval(() => {
|
||||||
if (remain.value === 0) {
|
if (remain.value === 0) {
|
||||||
@@ -188,6 +201,7 @@ onBeforeUnmount(() => {
|
|||||||
width: `${(remain / total) * 100}%`,
|
width: `${(remain / total) * 100}%`,
|
||||||
backgroundColor: barColor,
|
backgroundColor: barColor,
|
||||||
right: tips.includes('红队') ? 0 : 'unset',
|
right: tips.includes('红队') ? 0 : 'unset',
|
||||||
|
transition: transitionStyle,
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<text>剩余{{ remain }}秒</text>
|
<text>剩余{{ remain }}秒</text>
|
||||||
@@ -242,7 +256,6 @@ onBeforeUnmount(() => {
|
|||||||
height: 15px;
|
height: 15px;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
transition: all 1s linear;
|
|
||||||
}
|
}
|
||||||
.container > view:last-child > text {
|
.container > view:last-child > text {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
|
|||||||
@@ -20,12 +20,23 @@ const barColor = ref("");
|
|||||||
const remain = ref(15);
|
const remain = ref(15);
|
||||||
const timer = ref(null);
|
const timer = ref(null);
|
||||||
const laoding = ref(false);
|
const laoding = ref(false);
|
||||||
|
const transitionStyle = ref("all 1s linear");
|
||||||
|
|
||||||
const updateRemain = (value) => {
|
const updateRemain = (value) => {
|
||||||
// if (Math.ceil(value) === remain.value || Math.floor(value) === remain.value)
|
|
||||||
// return;
|
|
||||||
if (timer.value) clearInterval(timer.value);
|
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(() => {
|
timer.value = setInterval(() => {
|
||||||
laoding.value = remain.value === 0;
|
laoding.value = remain.value === 0;
|
||||||
if (remain.value > 0) remain.value--;
|
if (remain.value > 0) remain.value--;
|
||||||
@@ -72,6 +83,7 @@ onBeforeUnmount(() => {
|
|||||||
width: `${(remain / total) * 100}%`,
|
width: `${(remain / total) * 100}%`,
|
||||||
background: barColor,
|
background: barColor,
|
||||||
right: tips.includes('红队') ? 0 : 'unset',
|
right: tips.includes('红队') ? 0 : 'unset',
|
||||||
|
transition: transitionStyle,
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<text v-if="!laoding">剩余{{ remain }}秒</text>
|
<text v-if="!laoding">剩余{{ remain }}秒</text>
|
||||||
@@ -106,7 +118,6 @@ onBeforeUnmount(() => {
|
|||||||
.container > view:last-child > view {
|
.container > view:last-child > view {
|
||||||
height: 24rpx;
|
height: 24rpx;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
transition: all 1s linear;
|
|
||||||
}
|
}
|
||||||
.container > view:last-child > text {
|
.container > view:last-child > text {
|
||||||
font-size: 18rpx;
|
font-size: 18rpx;
|
||||||
|
|||||||
Reference in New Issue
Block a user