Fix weird animation flash on mobile (#304)

When we visit the website on mobile, there's a weird animation flash. This is caused because the navbar by default is placed at left: 0, and we see the transform animation once the page loads. This places the navbar at left: 100% (outside the screen) and transforms it to move into the screen - translateX(-100%)

Reviewed-on: www/www-new#304
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
fix-md-font
Aditya Thakral 1 year ago
parent 0043c3f949
commit c7f0d83bba
  1. 10
      components/Navbar.module.css

@ -152,6 +152,11 @@
visibility: visible;
}
/* Prevents a weird flash of opacity change on mobile */
.navMobileBackground {
opacity: 0;
}
/* On a smaller desktop screen, keep the same navbar layout but decrease the
* horizontal padding so it still fits
*/
@ -237,7 +242,7 @@
box-sizing: border-box;
height: 100%;
top: 0;
right: 0;
left: 100%;
overflow: auto;
z-index: 30;
@ -246,7 +251,6 @@
background-color: var(--secondary-background);
transform: translateX(100vw);
transition: 0.5s;
}
@ -364,7 +368,7 @@
}
.show.navMobileBackground + .navMenuWrapper {
transform: translateX(0);
transform: translateX(-100%);
}
.rotate {

Loading…
Cancel
Save