切换菜单-动画高度

Question

如何制作下拉式顶部栏？基金会通过显示将其隐藏。而且我不能使用过渡高度。

下面的标题结构

        <div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="large">
              <div class="toggle-button"><button class="menu-icon" type="button" data-toggle></button></div>
              <div class="title-bar-title show-for-sr" >Menu</div>
        </div>

        <nav class="top-bar navigation" id="example-animated-menu">
                    <div class="dropdown menu navigation-list" data-dropdown-menu >
                        <ul id="menu-menu " class="menu algin-right vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
                            <li><a href="#">X</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">X</a></li>
                        </ul>
                    </div>

                    <form class="search">
                        <div class="grid-x grid-padding-x">
                            <div class="small-9 cell">
                                <input type="text" id="middle-label" placeholder="Search">
                            </div>
                            <div class="small-3 cell">
                                <label for="middle-label" class="text-left middle"><img src="img/ico-search.png" alt="#" /></label>
                            </div>
                        </div>
                    </form>
              </nav>

Answer 1

您可以将.top-bar显示为.dropdown-pane的子项，然后用display: none;覆盖display: block。

然后只需将max-height的过渡添加到.top-bar，从0到您选择的高度即可。

HTML：

<div class="dropdown-pane"
     id="example-animated-menu" 
     data-dropdown
     data-position="bottom" 
     data-alignment="bottom"
     data-v-offset="40px">
  <nav class="top-bar navigation" ></nav>
</div>

CSS：

.dropdown-pane {
  width: 100%;
  padding: 0;
  display: block;
  max-height: 0;
  -webkit-transition: all 0.11s ease;
  transition: all 0.11s ease;
}

.top-bar {
  max-height: 0;
  overflow: hidden;
}

.is-open .top-bar {
  max-height: 76px;
  -webkit-transition: max-height 0.5s ease;
  transition: max-height 0.5s ease;
  overflow: hidden;
}

参见JSFiddle demo