Почему у меня не работает анимация выпадающего меню навигационной панели?

Question

Когда я нажимаю на значок переключателя навигации, меню навигации не отображается в виде «скольжения вниз».Он должен скользить вниз, когда появляется (когда добавлен класс .show).

Я установил свойства высоты в правиле @keyframe.Я установил свойство переполнения на «скрытый».Тем не менее, я не могу заставить навигацию анимироваться и скользить вниз, когда она появляется.

HTML:

<header class="header">
    <div class="header--one">
        <div class="header__logo-box">
            <a class="header__logo">myBlog</a>
        </div>
        <i class="header__navtoggle fa fa-bars"></i>
    </div>
    <div class="header--two">
        <nav class="header__nav">
            <a href="#" class="header__nav-item">Link 1</a>
            <a href="#" class="header__nav-item">Link 2</a>
            <a href="#" class="header__nav-item">Link 3</a>
        </nav>
    </div>
</header>

SCSS:

 @import url('https://fonts.googleapis.com/css? family=Roboto+Slab:400,700&display=swap');

 *,*::before,*::after{
     box-sizing: inherit;
     margin: 0;
     padding: 0;
 }

 html{
     font-size: 62.5%;
 }

 body{
     box-sizing: border-box;
     color: #777;
     font-family: 'Roboto Slab', serif;
     background:#f2f2f2;
 }


 .header{
     background:#333;
     display:flex;
     font-size:2.4rem;
     color:#999;

     &--one{
         flex:1;
         display:flex;
         align-items:center;
     } 

     &--two{
         overflow:hidden;

     }

     &__logo-box{
          flex:1;
     }

     &__logo{
         display:block;
         padding:1rem;
     }

     &__navtoggle{
         display:block;
         padding:1rem;
         cursor:pointer;
     }

     &__nav{
         display:flex;
     }

     &__nav-item{
         display:block;
         padding:1rem;
         border-left:.8px solid #000;
         text-decoration:none;
         color:inherit;
         transition:.3s all;

         &:hover{
             background:#bca64b;
             color:#333;
         }
     }
  }


  @media(max-width: 650px){
     .header{
         flex-direction:column;

         &__nav{
             flex-direction:column;
         }

         &--one{
             border-bottom:1px solid #000;
         }

         &--two{
             background:#444;
             display:none;
             animation:slideDown .5s ease-out;
         }

         &--two.show{
             display:block;
         }
     }



 }


 @media(min-width: 651px){

     .header{

         align-items: center;

         &__navtoggle{
             display:none;
         }
     }

 }

 @keyframes slideDown{
     from{height:0;opacity:0;}
     to{height:100%;opacity:1;}
 }

JS:

  document.querySelector('.header__navtoggle').addEventListener('click',()=>{

        document.querySelector('.header--two').classList.toggle('show');

    });

Answer 1

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

Вам необходимо заменить display: block/show на height: 0/100px.