带动画/过渡的中心元素

Question

我正在尝试创建一个从下到上移动的全屏菜单，但在垂直居中时遇到了麻烦。

基本上，它从屏幕出来，应该正好在它的中间（居中）。

但是，由于它是一个高度未知的固定菜单，而且我正在使用动画，因此可用的选项并不多：

• 我不能使用margin: auto技术，因为auto值不适用于过渡；
• 我试图避免使用 flexbox；
• translateY()似乎工作正常，但它创建了自上而下的运动，而不是所需的自下而上的运动（请参阅我的代码）
• 还要别的吗？ （最好适用于较旧的浏览器，但如果有办法改变方向，我也可以使用translateY管理）

 $('#small-nav-btn').click(function() { $('#overlay').addClass('open'); $('#close-menu-cross').addClass('open'); $('#nav').addClass('open'); }) $('#cross').click(function() { $('#overlay').removeClass('open'); $('#close-menu-cross').removeClass('open'); $('#nav').removeClass('open'); })

 * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Now-Regular", sans-serif; font-size: 12px; font-weight: bold; } ul { list-style-type: none; } a { color: black; } #overlay { background: #fff; opacity: 0; position: fixed; bottom: 0; left: 0; width: 100%; height: 0; transition: all 1s ease 0s; z-index: 1555; } #overlay.open { opacity: 1; height: 100%; } #small-nav-bar { display: block; width: 80%; margin: 0 auto; text-align: center; color: black; } #small-nav-btn { cursor: pointer; } #nav { background: orange; position: fixed; top: -100%; /*I need it to be bottom: -100% for the bottom-top movement*/ left: 50%; transform: translate(-50%, -50%); transition: all 0.8s linear 0.1s; z-index: 1556; } #nav.open { top: 50%; /*Again, I need this to be bottom: 50%*/ } #close-menu-cross.open { display: block; position: fixed; top: 15px; right: 20px; z-index: 1556; cursor: pointer; } #close-menu-cross { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="nav-container"> <div id="small-nav-bar"> <div id="small-nav-btn">BUTTON</div> </div> <ul id="nav"> <li><a href="contact.html"><span>HELLO</span></a> </li> <li><a href="about.html"><span>HELLO</span></a> </li> </ul> <div id="close-menu-cross"> <div id="cross">X</div> </div> </nav>

提琴手

提前致谢！ :)

Answer 1

你很接近。 只需在 CSS 中进行一些调整，您就有了一个完整的工作演示：

 $('#small-nav-btn').click(function() { $('#overlay').addClass('open'); $('#close-menu-cross').addClass('open'); $('#nav').addClass('open'); }) $('#cross').click(function() { $('#overlay').removeClass('open'); $('#close-menu-cross').removeClass('open'); $('#nav').removeClass('open'); })

 #nav { background: orange; position: fixed; top: 100%; /* 1 */ left: 50%; transform: translate(-50%, 0); /* 2 */ transition: all 0.8s linear 0.1s; z-index: 1556; } #nav.open { top: 50%; transform: translate(-50%, -50%); /* 2 */ } * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Now-Regular", sans-serif; font-size: 12px; font-weight: bold; } ul { list-style-type: none; } a { color: black; } #overlay { background: #fff; opacity: 0; position: fixed; bottom: 0; left: 0; width: 100%; height: 0; transition: all 1s ease 0s; z-index: 1555; } #overlay.open { opacity: 1; height: 100%; } #small-nav-bar { display: block; width: 80%; margin: 0 auto; text-align: center; color: black; } #small-nav-btn { cursor: pointer; } #close-menu-cross.open { display: block; position: fixed; top: 15px; right: 20px; z-index: 1556; cursor: pointer; } #close-menu-cross { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="nav-container"> <div id="small-nav-bar"> <div id="small-nav-btn">BUTTON</div></div> <ul id="nav"> <li><a href="contact.html"><span>HELLO</span></a></li> <li><a href="about.html"><span>HELLO</span></a></li> </ul> <div id="close-menu-cross"> <div id="cross">X</div> </div> </nav>

笔记：

1. CSS偏移属性（ top 、 bottom 、 left 、 right ），当应用于绝对定位元素（包括position: fixed ）时，将元素从各自的边缘移动 x 距离。

   您的代码中有top: -100% 。 这会将元素 100%置于顶部边缘之上。

   然后您将其移至top: 50% 。 这会将元素放在容器的中间。

   本质上，您的动画将元素从窗口上方移动到窗口内部 150% 的距离。 运动是从上到下的。

   但是您希望运动从下到上。

   因此，从底部和屏幕外（ top: 100% ）一直启动元素，并将其向上移动到容器内的一半（ top: 50% ）。

2. transform: translate()规则只是微调了 centering 。

   如果translateY(-50%)应用于主要状态（如您的代码中），它将在转换之前将 50% 的导航移动到屏幕上（ demo ）。

   这就是为什么我只将translateY(-50%)应用于过渡状态。

   有关完整的解释，请参阅我的回答：元素不会保持居中，尤其是在重新调整屏幕大小时

js小提琴