Question

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

一个简单的设置：顶部导航，带有切换图标以显示侧边栏print list(slicelist('<', org_list))。补充工具栏项目包含在<aside>中。其中一个侧边栏项目需要位于底部，我已将其位置设置为固定。这是jquery：

<div id='swap'>

点击可快速将主要内容移至右侧并使(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"); }); })();本身可见和，然后通过转换显示侧边栏项目（{{ 1}}）

麻烦：立方贝塞尔形成一个“有趣”的入口，但它仅溢出底部的固定项目而<aside>似乎没有任何影响。过渡后，它完全到位。这是一个截图：

我的问题：如何在固定位置包含边框/防止此溢出？

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

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

＆＃13;

(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");
  });
})();

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

编辑：在.upper

的顶部添加了边框

除固定div外，包含css过渡边界

2 个答案: