javascript - 带动画/过渡的中心元素

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>

jsfiddle

提前致谢! :)

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 offset properties (top, bottom, left, right)，当应用于绝对定位的元素时(包括 position: fixed), 将元素从各自的边缘移动 x 距离。

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

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

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

   但您希望移动从下到上。

   所以从底部和屏幕外开始元素(top: 100%)，让它向上移动到容器内部的一半(top: 50%).

2. transform: translate() 规则很简单 fine-tunes the centering .

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

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

   有关完整解释，请在此处查看我的回答:Element will not stay centered, especially when re-sizing screen

jsFiddle