pref: 进度条变化
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user