html - CSS3 动画幻灯片/隐藏导航影响其他元素

Question

当 1 被触发显示时，我想要 1 和 2 的平滑动画过渡。我在这里完成了这个:http://codepen.io/jacksonbeale/pen/epjcs使用负的上边距，但问题是 1 的高度会根据导航中的元素数量而变化，所以这对我不起作用。

nav {
    margin-top:-95px;
    width:100%;
    box-sizing:border-box;
    z-index:5;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    &.showmenu {
      margin-top:0;
    }
  }

我现在的元素不允许我使用jQuery，任何js都需要其他开发者来写。我只能控制 html 和 css。我似乎遇到了这个问题，所以如果有人可以提供关于纯 css 方法的建议来完成我需要的，那就太好了。

Answer 1

你可以这样做:

• 在菜单和内容周围添加一个容器
• 绝对定位您的内容
• 然后，由于容器只有菜单的高度(内容因 position:absolute; 而无法流动)，您可以使用 translateY 通过 translateY 切换菜单的进出(-100%)/translateY(0)

DEMO

HTML :

<div class="test">
  <div><span class="menulink">Menu</span></div>
  <div class="content">
    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Three</li>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Three</li>
      </ul>
    </nav>
    <div>content</div>
  </div>
</div>

CSS:(抱歉我不习惯 SCSS)

.test {
  width:400px;
  position:relative;
  > div, nav {
    border:3px solid #CCC;
  }
  > div:first-child {
    height:30px;
    z-index:10;
    background:teal;
    position:relative;
    z-index:1;
    span {
      float:right;
      display:table;
      height:100%;
      &:hover {
        cursor:pointer;
      }
    }
  }
  nav {
    width:100%;
    box-sizing:border-box;
    z-index:5;
    &.showmenu {
      margin-top:0;
    }
  }
}
.content > div{
  min-height:200px;
    position:absolute;
    left:-3px; top:100%;
    width:100%;
  border:3px solid #ccc;
}
.content{
  z-index:0;
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.content.showmenu{
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

jQuery :

$( ".menulink" ).click(function() {
  $( ".content" ).toggleClass( "showmenu" );
});