jquery - 除固定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时，元素将相对于视口(viewport)定位，因此其父容器的溢出将不起作用。

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

<小时/>

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

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