Opazität seltsame Wirkung bei der Größe ⇐ CSS

[Anonymous]

Ich entwickle eine Website und habe diesen Code, wenn das CSS < /p>
beginnt

Code: Select all

/* Menu hidden by default*/
#menu {
transform: translateY(-35px);
opacity: 0;
transition: 0.35s;
}
< /code>
Mit dieser schematisierten HTML -Struktur, die ein Menü mit Links einer Navigationsleiste darstellt < /p>
            [list]
[*]


[*]


[*]


[*]


[/list]
< /code>
Ich muss das Menü in einem anderen Layout nach 1000px (vom Hamburger -Menü bis zum Desktop -Menü) stylen, damit ich eine Medienabfrage verwendet < /p>
/* Media query for desktop */
@media (min-width: 1001px) {
#menu {
opacity: 1;
transform: translateY(0px);
}
}
< /code>
Das Problem ist hier. Testen mit Entwicklungs -Tools, wenn ich das Fenster von 1001px auf 1000px -Deckkraft ändern kann, verläuft von 1 bis 0, da die Medienabfrage nicht mehr aktiv ist. Dieser Schalter verursacht einen schnellen Blitz von 0,35s, wenn ich das Menü verschwindet und es ist wirklich ärgerlich. Bitte wie ich das beheben kann? Ich denke, es gibt keine Lösung, aber [url=viewtopic.php?t=14917]ich möchte[/url] den Opazitätseffekt beibehalten, wenn es möglich ist, danke.window.addEventListener("resize", () => {
if (window.innerWidth < 1001) {
console.log('ok');
menu.style.display = 'none';
setTimeout(() => {
menu.style.display = 'flex';
}, 50);
}
});