为什么我的侧边栏 CSS 关闭动画会在屏幕加载时激活？

Question

我正在使用 html、JS 和 Scss 来设置一个基本的侧边栏动画，在用户单击汉堡图标后，侧边栏从左侧滑入，然后在用户单击侧边栏时关闭。

我有一个烦人的问题，我的侧边栏的“关闭”动画在页面加载时执行。所以在页面加载时侧边栏开始完全打开，然后滑出视图。每次刷新页面时都会发生这种情况，尽管我注意到如果我注释掉我的谷歌字体导入（我正在导入我的 scss 文件），这个问题不会经常发生。

我认为这可能是由于浏览器如何下载我的 css 文件，所以尝试使用 rel="preload" 预加载 css 文件，但没有效果。

我对代码有一些误解，即使在小提琴中运行代码实际上并没有复制问题！不过，在 Chrome、Firefox 或 Edge 中运行该代码确实存在问题。任何帮助将不胜感激！

https://jsfiddle.net/5c8d1vze/1/

 @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap");

 .hamburger_container:focus {
   outline: none;
   -webkit-tap-highlight-color: transparent;
 }

 .hamburger {
   padding: 0.9375rem 0.9375rem;
   display: flex;
   align-items: center;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition-property: opacity, filter;
   transition-duration: 0.15s;
   transition-timing-function: linear;
   font: inherit;
   color: inherit;
   text-transform: none;
   background-color: transparent;
   border: 0;
   margin: 0;
   overflow: visible;
 }

 .hamburger:hover {
   opacity: 1;
 }

 .hamburger.is-active:hover {
   opacity: 0.7;
 }

 .hamburger.is-active .hamburger-inner,
 .hamburger.is-active .hamburger-inner::before,
 .hamburger.is-active .hamburger-inner::after {
   background-color: #00b8c2;
 }

 .hamburger:focus {
   outline: none;
 }

 .hamburger-box {
   width: 2.5rem;
   height: 1.5rem;
   display: inline-block;
   position: relative;
 }

 .hamburger-inner {
   display: block;
   top: 50%;
   margin-top: -0.125rem;
 }

 .hamburger-inner,
 .hamburger-inner::before,
 .hamburger-inner::after {
   width: 2.5rem;
   height: 0.25rem;
   background-color: #00b8c2;
   border-radius: 0.25rem;
   position: absolute;
   transition-property: transform;
   transition-duration: 0.15s;
   transition-timing-function: ease;
 }

 .hamburger-inner::before,
 .hamburger-inner::after {
   content: "";
   display: block;
 }

 .hamburger-inner::before {
   top: -0.625rem;
 }

 .hamburger-inner::after {
   bottom: -0.625rem;
 }

 .hamburger--emphatic {
   overflow: hidden;
 }

 .hamburger--emphatic .hamburger-inner {
   transition: background-color 0.125s 0.175s ease-in;
 }

 .hamburger--emphatic .hamburger-inner::before {
   left: 0;
   transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
 }

 .hamburger--emphatic .hamburger-inner::after {
   top: 0.625rem;
   right: 0;
   transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
 }

 .hamburger--emphatic.is-active .hamburger-inner {
   transition-delay: 0s;
   transition-timing-function: ease-out;
   background-color: transparent !important;
 }

 .hamburger--emphatic.is-active .hamburger-inner::before {
   left: -5rem;
   top: -5rem;
   transform: translate3d(5rem, 5rem, 0) rotate(45deg);
   transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
 }

 .hamburger--emphatic.is-active .hamburger-inner::after {
   right: -5rem;
   top: -5rem;
   transform: translate3d(-5rem, 5rem, 0) rotate(-45deg);
   transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
 }

 * {
   box-sizing: border-box;
 }

 /*** HEADER *** */
 /* Header Bar */
 .header {
   align-items: center;
   background: #1b262c;
   color: #00b7c2;
   display: flex;
   height: 3.125rem;
   justify-content: space-between;
   padding: 0.3125rem 1.25rem;
 }

 /* Top Navbar */
 .desktop__navigation {
   display: flex;
   justify-content: flex-end;
 }

 .desktop__navigation div {
   display: none;
   padding-left: 1.25rem;
 }

 /* SIDE NAVBAR */
 .mobile {
   align-items: center;
   background: #1b262c;
   color: #00b7c2;
   display: flex;
   height: 100vh;
   justify-content: center;
   opacity: 0.7;
   position: fixed;
   text-align: center;
   top: 0;
   transform: translateX(-100%);
   transition: transform 500ms ease-out;
   width: 80vw;
 }

 .mobile .mobile__items {
   font-size: 2rem;
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .open {
   display: flex;
   transform: translateX(0);
 }

 /* *** BODY *** */
 body {
   background-color: #0f4c75;
   font-family: "Rubik", sans-serif;
   margin: 0;
 }

 @media (min-width: 40rem) {
   .desktop__navigation div {
     display: block;
   }
 }

            <header class="header">
              <nav class="hamburger_container">
                <button class="hamburger hamburger--emphatic" type="button" id="hamburger-button">
                  <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                  </span>
                </button>
              </nav>
              <nav class="desktop">
                <div class="desktop__navigation">
                  <!-- Turn this into a drop down menu -->
                  <div>Courses</div>
                </div>
              </nav>
            </header>
            <nav class="mobile" id="mobile">
              <ul class="mobile__items">
                <li class="mobile__item">CSS</li>
                <li class="mobile__item">JavaScript</li>
              </ul>
            </nav>

            <main>
            </main>




   

Answer 1

我在几个浏览器中遇到过类似的事情。问题是具有初始转换值的对象有时会显示默认值（例如 0），然后当页面和 css 加载后应用转换，向您显示动画。

一种解决方法是从初始类中排除过渡值，然后在加载页面时，将“页面加载”类添加到正文中并具有类似的东西

body.page-loaded #mobile{
    transition:0.5s;
}

在 CSS 中。

Answer 2

我设法在本地重现了您的问题。看来您的字体导入语句正在延迟 .mobile div 的初始转换。

对此最快的“修复”是在 CSS 文件的末尾而不是开头导入字体。这解决了我绝大多数时候刷新的问题，但仍然发生了很少几次。

或者，我建议稍微重写您的 CSS，以便默认情况下开始隐藏侧边菜单（无需初始转换），例如将transform: translateX(-100%); 替换为left: -100%。