Почему моя боковая панель CSS анимация закрытия активируется при загрузке экрана? - PullRequest
Новая
       121

Почему моя боковая панель CSS анимация закрытия активируется при загрузке экрана?

0 голосов
/ 01 августа 2020

Я использую html, JS и S css, чтобы настроить базовую c анимацию боковой панели, которая после того, как пользователь щелкает значок гамбургера, боковая панель сдвигается слева и затем закрывается, если пользователь щелкает по боковой панели.

У меня неприятная проблема, когда при загрузке страницы выполняется анимация «закрытия» моей боковой панели. Таким образом, при загрузке страницы боковая панель начинает полностью открываться, а затем исчезает из поля зрения. Это происходит каждый раз, когда я обновляю sh страницу, хотя я заметил, что если я закомментирую свой импорт шрифтов Google (я переношу в свой файл s css), эта проблема возникает не так часто.

Я подумал, что это может быть связано с тем, как браузер загружает мой файл css, поэтому я попытался предварительно загрузить файл css с помощью rel = "preload", но это не помогло.

У меня есть возиться с кодом, хотя запуск кода в скрипте на самом деле не воспроизводит проблему! Однако при запуске этого кода в 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>

Ответы [ 2 ]

2 голосов
/ 01 августа 2020

Мне удалось воспроизвести вашу проблему локально. Кажется, что ваш оператор импорта шрифта задерживает начальное преобразование .mobile div.

Самым быстрым "исправлением" этого будет импорт шрифта в конец вашего CSS файла вместо начало. Это решало проблему для меня в подавляющем большинстве случаев, когда я обновлялся, но все еще происходило очень несколько раз. для начального преобразования), например, замените transform: translateX(-100%); на left: -100%.

1 голос
/ 02 августа 2020

Я сам сталкивался с чем-то похожим в паре браузеров. Дело в том, что объекты с начальными значениями перехода иногда отображают значение по умолчанию (например, 0), а затем, когда страница и css загружены, применяйте переход после этого, показывая вам анимацию.

Одно из исправлений - исключить значение перехода из начального класса, затем, когда страница загружена, добавьте класс "page-loaded" или около того в тело и укажите что-то вроде 

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

в css.

...