Обратная анимация на кнопке гамбургера - PullRequest
Новая
       1

Обратная анимация на кнопке гамбургера

0 голосов
/ 24 февраля 2020

Я пытаюсь оживить кнопку гамбургера. Проблема в том, что анимация прекрасно работает только для первого клика, и я не знаю, как заставить второй щелчок сделать обратную анимацию. Я не уверен, что это можно сделать без использования ключевых кадров. Ps. скобки в css не отформатированы, потому что они скомпилированы из s css. 

var hamburger = document.getElementById("hamburger");
var nav_items = document.getElementsByClassName("nav-items")[0];
var line1 = document.getElementsByClassName("line1")[0];
var line2 = document.getElementsByClassName("line2")[0];
var line3 = document.getElementsByClassName("line3")[0];

hamburger.addEventListener("click", function() {
  nav_items.classList.toggle("nav-open");
  line1.classList.toggle("first-line");
  line2.classList.toggle("middle-line-hidden");
  line3.classList.toggle("last-line");
});
body {
  background-color: white;
  margin: 0;
  padding: 0;
   }

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  color: white;
  z-index: 100;
  background-color: blue;
  }

#logo {
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  font-size: 25px; }
  #logo a {
    text-decoration: none;
    color: white; }
  #logo a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 100%;
    background-color: yellow;
    z-index: -1; }

.nav-items {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
  justify-content: center;
  font-size: 2rem;
  background-color: black; }
  .nav-items a {
    text-decoration: none;
    color: white;
    margin: 15px 0; }
    .nav-items a:first-child {
      margin-top: 0; }
    .nav-items a:hover {
      color: yellow; }

#hamburger {
  height: 40px;
  width: 40px;
  background-color: transparent;
  border: 0px solid transparent;
  padding: 0;
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  }
  #hamburger .line1,
  #hamburger .line2,
  #hamburger .line3 {
    position: absolute;
    left: 0;
    height: 5px;
    width: 100%;
    background-color: white;
    border-radius: 25px;
    transition: 0.5s linear; }
  #hamburger .line1 {
    top: 3px; }
  #hamburger .line2 {
    top: 50%;
    transform: translateY(-50%); }
  #hamburger .line3 {
    bottom: 3px; }

.nav-open {
  visibility: visible; }

.middle-line-hidden {
  animation: hamburger-mid-line 0s linear;
  animation-fill-mode: forwards;
  animation-delay: 0.3s; }

.first-line {
  animation: hamburger-first-line 0.5s;
  animation-fill-mode: forwards; }

.last-line {
  animation: hamburger-last-line 0.5s;
  animation-fill-mode: forwards; }

@keyframes hamburger-mid-line {
  from {
    visibility: visible; }
  to {
    visibility: hidden; } }

@keyframes hamburger-first-line {
  0% { }
  50% {
    top: 50%;
    transform: translateY(-50%); }
  100% {
    top: 42%;
    transform: rotate(45deg); } }

@keyframes hamburger-last-line {
  0% { }
  50% {
    bottom: 50%;
    transform: translateY(50%); }
  100% {
    bottom: 45%;
    transform: rotate(-45deg); } }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>

  <body>
    <header id="navbar">
      <div class="nav-items">
        <a href="#">link1</a>
        <a href="#">link2</a>
        <a href="#">link3</a>
      </div>

      <button id="hamburger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </button>
    </header>


    
  </body>
</html>

1 Ответ

1 голос
/ 24 февраля 2020

Самый простой способ - назначить в css анимацию классу, например .openedhamburger с открывающей анимацией.

Теперь создайте другую анимацию, назначенную другому классу, например .closedhamburger, с закрывающей анимацией.

Наконец, переключите класс, присвоенный элементу с помощью javascript, и там, где бы ни был назначен другой класс, будет запущена надлежащая анимация.

Edit : также, хотя в вашем случае используйте двухэтапную анимацию, так что это не применимо, знайте, что при использовании этого классового подхода, если вы включаете плавные переходы, то иногда вы можете даже сделать это без какой-либо анимации: просто свяжите положения и повороты для элементов в двух состояниях, и тогда, когда включены плавные преобразования, анимация будет происходить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...