fix: 布局闪烁

This commit is contained in:
unanmed 2023-11-07 19:25:59 +08:00
parent 8fcc570e5d
commit 0ed7e03f40
5 changed files with 18 additions and 12 deletions

View File

@ -63,11 +63,12 @@ onMounted(() => {
position: fixed; position: fixed;
background-color: #000b; background-color: #000b;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
z-index: 1;
} }
#ui-list { #ui-list {
width: 90%; width: 90vw;
height: 90%; height: 90vh;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
left: 0; left: 0;
@ -75,8 +76,8 @@ onMounted(() => {
} }
.ui-one { .ui-one {
width: 100%; width: 90vw;
height: 100%; height: 90vh;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -92,6 +93,7 @@ onMounted(() => {
left: 0; left: 0;
top: 0; top: 0;
display: none; display: none;
z-index: 0;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {

View File

@ -46,7 +46,7 @@ let content: HTMLDivElement;
let fromSelf = false; let fromSelf = false;
const resize = async () => { const resize = async () => {
await calHeight(); await calHeight(false);
draw(); draw();
}; };
@ -87,8 +87,10 @@ function draw() {
/** /**
* 计算元素总长度 * 计算元素总长度
*/ */
async function calHeight() { async function calHeight(first: boolean) {
await sleep(20); if (!first) {
await sleep(20);
}
const canvas = ctx.canvas; const canvas = ctx.canvas;
const style2 = getComputedStyle(canvas); const style2 = getComputedStyle(canvas);
canvas.style.width = `${width}px`; canvas.style.width = `${width}px`;
@ -123,7 +125,7 @@ onUpdated(async () => {
if (fromSelf) return; if (fromSelf) return;
now = props.now ?? now; now = props.now ?? now;
content.style.transition = `${cssTarget} 0.2s ease-out`; content.style.transition = `${cssTarget} 0.2s ease-out`;
await calHeight(); await calHeight(false);
scroll(); scroll();
}); });
@ -204,7 +206,7 @@ onMounted(async () => {
}); });
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
await calHeight(); await calHeight(true);
draw(); draw();
}); });

View File

@ -179,8 +179,6 @@ export class UiController extends Focus<IndexedGameUi> {
v.ui.emit('close'); v.ui.emit('close');
}); });
if (this.stack.length === 0) { if (this.stack.length === 0) {
console.log(this.hold);
if (!this.hold) this.emit('end'); if (!this.hold) this.emit('end');
this.hold = false; this.hold = false;
} }

View File

@ -56,7 +56,9 @@ hook.once('mounted', () => {
}); });
mainUi.on('end', () => { mainUi.on('end', () => {
ui.style.display = 'none'; ui.style.display = 'none';
core.closePanel(); try {
core.closePanel();
} catch {}
}); });
fixedUi.on('start', () => { fixedUi.on('start', () => {
fixed.style.display = 'block'; fixed.style.display = 'block';

View File

@ -4,6 +4,8 @@ import { has } from '../utils';
import { ChaseCameraData, ChasePath, getChaseDataByIndex } from './data'; import { ChaseCameraData, ChasePath, getChaseDataByIndex } from './data';
import { init1 } from './chase1'; import { init1 } from './chase1';
// todo: 优化可以继承自EventEmitter
export default function init() { export default function init() {
return { startChase, chaseInit1: init1 }; return { startChase, chaseInit1: init1 };
} }