Animacja hamburgera - jak odwrócić kierunek ruchu środkowej lini?

Question

Hej, chciałabym by ruch środkowej lini w hamburgerze był wykonywany w prawo, a nie w lewo jak w tej chwili. Zmieniałam kod na różne sposoby, zmieniałam także kod na liczby ujemne i odwrotnie, ale zachowanie animacji hamburgera jest dla mnie nadal zagadką :/

Mógłby ktoś mi pomóc i powiedzieć co muszę zmienić by linia środowa uciekała w prawą stronę?

Pozdrawiam i z góry dziękuję :)

 

<div class="menu-btn">
    <div class="menu-btn__burger"></div>
</div>

<!-- how look hamburger on css -->
.menu-btn__burger::before,
    .menu-btn__burger::after {
      margin-left: 10px;
    }

    .menu-btn {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 80px;
      cursor: pointer;
      transition: all .1s ease-in-out;
      left: 250px;
    }

    .menu-btn__burger {
      width: 50px;
      height: 6px;
      background: #181543;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
      transition: all .1s ease-in-out;
    }

    .menu-btn__burger::before,
    .menu-btn__burger::after {
      content: '';
      position: absolute;
      width: 50px;
      height: 6px;
      background: #181543;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
      transition: all .1s ease-in-out;
    }

    .menu-btn__burger::before {
      transform: translateY(-16px);
    }

    .menu-btn__burger::after {
      transform: translateY(16px);
    }


   /* how hamburger are animation */



 .menu-btn.open .menu-btn__burger {
      transform: translateX(-50px);
      background: transparent;
      box-shadow: none;
    }

    .menu-btn.open .menu-btn__burger::before {
      transform: rotate(45deg) translate(35px, -35px);
    }

    .menu-btn.open .menu-btn__burger::after {
      transform: rotate(-45deg) translate(35px, 35px);
    }
   
css

 

Comments

Rozumiem w takim razie, że kod nie należy do CIebie...
wklej to w taki sposób żeby działalo np poprzez js-fiddle

---

Hej, niestety to nie mój kod. Animacje hamburgerów zawsze mnie przerażały więc posługiwałam się (o ile oczywiście mogłam) udostępnionym przez innych kodem.

Link do animacji jakby ktoś chciał zerknąć, bo może a nuż ktoś szuka takiego rozwiązania : https://jsfiddle.net/szachistka/qv01mLst/7/

Answer 1

Zmiana

        .menu-btn__burger::before,
        .menu-btn__burger::after {
            margin-left: -10px;
        }

przesunie Ci środkową kreskę, a tak naprawdę to przesunie górną i dolną, tak, że środkowa będzie wyglądała jak wysunięta w prawo.

Comments

Dziękuję bardzo :) Zaraz wypróbuję :)

Ps. Nie zupełnie mi o to chodziło ;) Wygląd hamburgera został lekko zmodyfikowany z gotowego kodu i tam musi wyglądać. Chodzi o zmianę kierunku "uciekającej" środkowej kreseczki, która obecnie ucieka w lewo, a powinna w prawo.

Tu widać  obecną animację ;) https://jsfiddle.net/szachistka/qv01mLst/7/

---

Przepraszam niedoczytałem, zmień jeszcze ten fragment

.menu-btn.open .menu-btn__burger {
            transform: translateX(50px);
            background: transparent;
            box-shadow: none;
        }

        .menu-btn.open .menu-btn__burger::before {
            transform: rotate(45deg) translate(-35px, 35px);
        }

        .menu-btn.open .menu-btn__burger::after {
            transform: rotate(-45deg) translate(-35px, -35px);
        }

żeby manipulować położeniem po animacji. Chodzi głównie o translateX() z klasy

.menu-btn.open .menu-btn__burger

czyli końcowa współrzędna X środkowej kreski. Animacja będzie Ci ją przesuwać po osi X z prędkością zdefiniowaną w:

transition: all .1s ease-in-out;

chcesz, żeby przesuneła się w prawo, więc wartość musi być dodatnia.

Pozatym musisz zadbać, żeby krzyżyk Ci się nie rozjechał stąd jeszcze zmiany we współrzędnych X i Y górnej i dolnej kreski czyli pseudoelementy:

.menu-btn.open .menu-btn__burger::before

i

 .menu-btn.open .menu-btn__burger::after

oraz ich translate po osi X i Y

---

Bardzo dziękuję, pomogło :)

Podziwiam Cię za odczytywanie i wyobrażanie sobie animacji tego typu :)

Pozdrawiam