为什么我的导航栏下拉动画无效？

Question

当我单击导航切换图标时，导航菜单不会以“向下滑动”方式显示。 它应该在它出现时向下滑动（当添加.show类时）。

我在@keyframe规则中设置了高度属性。 我已将overflow属性设置为“hidden”。 尽管如此，我无法将导航设置为动画并在显示时向下滑动。

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 to height: 0/100px 。