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

【问题标题】：How come my nav bar dropdown animation is not working?为什么我的导航栏下拉动画不起作用？
【发布时间】：2019-05-20 20:12:15
【问题描述】：

当我点击导航切换图标时，导航菜单没有以“向下滑动”的方式出现。它出现时应该向下滑动（添加 .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');

    });

【问题讨论】：

你能在 SO 的编辑器中创建一个Minimal, Reproducible Example? 或jsfiddle.net
您的问题位于样式表中。 100% 的高度并不像您认为的那样工作。如果您希望元素在高度上填充整个视口，您可以使用100vh 而不是100%。也许这会让您更接近解决方案。 另外，正如 Cesar 所说，您应该更新您的问题，以便社区可以更好地帮助您。
@Jan 我不希望它扩展整个视口的高度，只是容器的高度。
这里是 codepen，如果有帮助的话：codepen.io/hjb1694/pen/zQdWvO1

标签： javascript css sass

【解决方案1】：

动画仅适用于数字属性，如不透明度、高度、颜色等。它不适用于显示、位置、浮动等。

您需要将display: block/show 替换为height: 0/100px。

【讨论】：