除了固定的 div 外，包含 css 过渡边框

Question

出于学习目的，我一直在玩不同的 css 过渡效果。但是，我无法弄清楚这一点。

一个简单的设置：顶部导航带有一个切换图标来显示一个侧边栏<aside>。侧边栏项目包含在 <div id='swap'> 中。侧边栏项目之一需要位于底部，我已将其位置设置为固定。这是jquery：

(function() {
  $(".toggle-wrap").on("click", function() {
    $("i").toggleClass("fa-bars fa-times");
    $("main").toggleClass("main push");
    $("aside").animate({ width: "toggle" }, 200);
    $("#swap").toggleClass("hidden shown");
  });
})();

单击会迅速将主要内容向右移动并使<aside> 本身可见和然后通过过渡使侧边栏项目可见 (cubic-bezier(0.32, 1.25, 0.375, 1.15))

麻烦：三次贝塞尔曲线做了一个“有趣”的入口，但它只溢出底部的固定项目，overflow:hidden 似乎没有任何效果。过渡后，它完全到位。截图如下：

我的问题：我怎样才能在固定位置包含边框/防止这种溢出？

I have made a codepen to have the entire code available.

Answer 1

当使用position:fixed 时，元素将相对于视口定位，因此其父容器的溢出将不起作用。

要解决此问题，只需切换到position:absolute，您的元素将相对定位到最近的定位祖先，在您的情况下，它是aside 元素，而该元素的overflow:hidden 将隐藏你溢出的边界。

---

为什么两个位置值给出相同的结果？

仅仅是因为在您的情况下，您只应用了bottom:0，并且由于您的aside 占据了屏幕的整个高度，bottom:0 将指代屏幕底部的相同位置。您可以稍微调整aside 的高度，您会注意到这种情况下fixed 和absolute 之间的区别。

Answer 2

我使用了弹性盒并添加了一些包装类。如果您有任何问题，请告诉我。

(function() {
  $(".toggle-wrap").on("click", function() {
    $("i").toggleClass("fa-bars fa-times");
    $(".aside").animate({
      width: "toggle"
    }, 200);
    $(".lower").toggleClass("hidden shown");
    $(".upper").toggleClass("hidden shown");
  });
})();

html,
body,
.site-wrapper {
  height: 100%;
  font: normal 1em "Arial";
  background: #212121;
  color: #fff;
}

.site-wrapper {
  display: flex;
  flex-direction: column;
}

nav {
  padding: 10px;
  background: yellow;
  color: #000;
}

.toggle-wrap {
  padding: 10px;
  cursor: pointer;
  /*disable selection*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.content-wrapper {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.aside {
  background: #383838;
  display: none;
  overflow: hidden;
}

.aside-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 30vw;
}

.upper,
.lower {
  display: flex;
  flex-direction: column;
  transition: all 1950ms cubic-bezier(0.32, 1.25, 0.375, 1.15);
  transition-delay: 300ms;
  width: 30vw;
}

.upper {
  flex-grow: 1;
}

.lower {
  border-top: 2px solid yellow;
}

a {
  padding: 12px 18px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  border-bottom: 1px solid yellow;
}

.hidden {
  margin-left: -100%;
}

.shown {
  transition: all 1950ms cubic-bezier(0.32, 1.25, 0.375, 1.15);
  transition-delay: 300ms;
  margin-left: 0;
}

.main {
  padding: 2em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
  <nav>
    <div class="toggle-wrap">
      <i class="fa fa-bars"></i>
    </div>
  </nav>
  <div class="content-wrapper">
    <aside class="aside">
      <div class="aside-content">
        <div class="upper hidden">
          <a href="#">BRAND</a>
          <a href="#">another item</a>
        </div>
        <div class="lower hidden">
          <a href="#">Menu</a>
        </div>
      </div>
    </aside>
    <main class='main'>
      CONTENT
    </main>
  </div>
</div>

编辑：在.upper 顶部添加边框