Problem z animacją pojawiającego się menu - CSS

pytanie zadane 19 stycznia 2021 w HTML i CSS przez bartodziej2137 Nowicjusz (160 p.)

Siema, jestem w trakcie tworzenie menu mojej strony internetowej. Podczas klikania na hamburgera menu pojawia się i znika skokowo. W jaki sposób mogę sprawić, aby pojawianiu i znikaniu menu towarzyszyła krótka animacja zanikania? Próbowałem tak samo jak przy samym przycisku użyć transition lecz niestety nie to nie działa lub niewłaściwie z tego korzystam. Z góry dziękuję za pomoc, a poniżej znajdziecie jak na razie cały kod mojej strony.

<!DOCTYPE html>
<html lang="pl-PL">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="Bartłomiej Błaszczyk">
    <title>B2Media</title>
    
    <meta http-equiv="X-UA-Comptabile" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!--CSS!-->
    <link rel="stylesheet" href="css/main.css">
    <!--Favicon!-->
</head>
<body>
    <nav class="navigation">
        <ul class="navigation-list">
            <li class="navigation-element"><a href="#">Home</a></li>
            <li class="navigation-element"><a href="#">About us</a></li>
            <li class="navigation-element"><a href="#">Benefits</a></li>
            <li class="navigation-element"><a href="#">Offer</a></li>
            <li class="navigation-element"><a href="#">Contact</a></li>
        </ul>
    </nav>
    
    <button class="menu-btn">
        <span class="menu-btn-burger"></span>
    </button>
    
    <script src="main.js"> </script>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans', sans-serif;
    background-color: #fff;
    
    display: flex;
    justify-content: flex-end;
    min-height: 100vh;
}
/*HAMBURGER MENU*/
.menu-btn {
    position: relative;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    border: none;
    outline: none;
    background: transparent;
}

.menu-btn-burger {
    position: absolute;
    width: 50px;
    height: 6px;
    background: #000;
    transition: all .5s ease-in-out;
}

.menu-btn-burger::before,
.menu-btn-burger::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 6px;
    background: #000;
    transition: all .5s ease-in-out;
}

.menu-btn-burger::before {
    transform: translateY(-16px) translateX(-50%);
}

.menu-btn-burger::after {
    transform: translateY(16px) translateX(-50%);
}

/*Animation menu*/
.menu-btn.open .menu-btn-burger {
    transform: translateX(-150%);
    background: transparent;
}

.menu-btn.open .menu-btn-burger::before {
    transform: rotate(45deg) translate(35px, -35px);
    background-color: #fff;
}

.menu-btn.open .menu-btn-burger::after {
    transform: rotate(-45deg) translate(35px, 35px);
    background-color: #fff;
}
/*OPEN NAVIAGTION*/
.navigation.open {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
.navigation-list {
    list-style-type: none;
    
}
.navigation-element {
    display: block;
    width: 100%;
    text-align: center;
}

.navigation-element a{
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 36px;

}
/**/
.navigation {
    display: none;
}
/**/

const menuBtn = document.querySelector('.menu-btn');
const nav = document.querySelector('.navigation');
let menuOpen = false;

menuBtn.addEventListener('click', () => {
    if(!menuOpen) {
        menuBtn.classList.add('open');
        nav.classList.add('open');
        menuOpen = true;
    } else {
        menuBtn.classList.remove('open');
        nav.classList.remove('open');
        menuOpen = false;
    }
})

3 odpowiedzi

odpowiedź 19 stycznia 2021 przez krissto7 Gaduła (3,100 p.)
edycja 19 stycznia 2021 przez krissto7

Można to zrobić na wiele sposobów ,w zależności od tego jaki finalny efekt animacji chcesz uzyskać.

Jeśli chodzi Ci o to żeby element przejechał płynnie z niewidocznej sekcji do widocznej to zadziała na pewno ustawienie atrybutu w css np. transform: translateX(-100%); transition: 1s musisz dać na elemencie , który animujesz i potem po prostu w jakimś przycisku dodajesz klase .open/.active i w stylach tej klasy dasz transform: translateX(0%);

Teraz chyba widzę o co Ci chodzi , odnośnie animacji display:none to tego nie zrobisz bo display się nie animuje , zamiast display:none to użyj visibility:hidden oraz ustaw opacity:0 ,potem w .open daj visibility: visible oraz opacity: 1;

odpowiedź 19 stycznia 2021 przez VBService Ekspert (253,340 p.)

Małe zmiany w css-ie i js-cie Codepen

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
} 
body {
  font-family: 'Noto Sans', sans-serif;
  background-color: #fff;

  display: flex;
  justify-content: flex-end;
  min-height: 100vh;
}
/* HAMBURGER MENU */
.menu-btn {
  position: relative;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  border: none;
  outline: none;
  background: transparent;
} 
.menu-btn-burger {
  position: absolute;
  width: 50px;
  height: 6px;
  background: #000;
  transition: all .5s ease-in-out;
} 
.menu-btn-burger::before,
.menu-btn-burger::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #000;
  transition: all .5s ease-in-out;
} 
.menu-btn-burger::before {
  transform: translateY(-16px) translateX(-50%);
} 
.menu-btn-burger::after {
  transform: translateY(16px) translateX(-50%);
} 
/*Animation menu*/
.menu-btn.open .menu-btn-burger {
  transform: translateX(-150%);
  background: transparent;
} 
.menu-btn.open .menu-btn-burger::before {
  transform: rotate(45deg) translate(35px, -35px);
  background-color: #fff;
} 
.menu-btn.open .menu-btn-burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
  background-color: #fff;
}
.navigation {
  position: absolute;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  opacity: 0;    
  transition: all 1s;
}
/* OPEN NAVIAGTION */
.open {
  background-color: #000;
  opacity: 1;
  transition: all 1s;
}
.navigation-list {
  list-style-type: none;
}
.navigation-element {
  display: block;
  width: 100%;
  text-align: center;
}
.navigation-element a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 36px; 
}

const menuBtn = document.querySelector('.menu-btn');
const nav = document.querySelector('.navigation');
 
menuBtn.addEventListener('click', () => {
  menuBtn.classList.toggle('open');
  nav.classList.toggle('open');
})