Question

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

我已经在@keyframe规则中设置了height属性。我已将溢出属性设置为“隐藏”。不过，当导航出现时，我仍然无法对其进行动画处理和向下滑动。

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。

我的导航栏下拉动画为什么不起作用？

1 个答案: