css 除了固定 div 外，过渡边框都包含在内

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> 本身可见 and 然后使侧边栏通过转换可见的项目 (cubic-bezier(0.32, 1.25, 0.375, 1.15))

问题：立方贝塞尔曲线做了一个“有趣”的入口，但它只溢出底部的固定项目，而overflow:hidden似乎没有有什么影响。过渡之后，就完美到位了。这是屏幕截图：

我的问题：如何用固定位置包含border/prevent这个溢出？

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

Answer 1

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

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

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

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

Answer 2

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

(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

的顶部添加了边框

css 除了固定 div 外，过渡边框都包含在内

css transition border is contained except for fixed div

html

css

jquery

border

css-transitions