Question

我正在尝试创建一个全屏菜单来执行 自下而上的运动 ，并且我遇到了麻烦垂直居中。

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

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

我无法使用margin: auto技术，因为auto值不适用于过渡;
我试图避免使用flexbox;
translateY()似乎工作正常，但它创建了一个从上到下的运动，而不是所需的从底部到顶部的运动（参见我的代码）
其他什么？（最好是适用于较旧的浏览器，但如果有方法可以改变方向，我也可以使用translateY进行管理）

＆＃13;

$('#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');
})

＆＃13;

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

＆＃13;

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

＆＃13;

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>

注意：

CSS offset properties（top，bottom，left，right），应用于绝对定位的元素（包括{ {1}}），将元素x距离从相应的边缘移开。

您的代码中有position: fixed。这会使元素100％高于的上边缘。

然后你转移到top: -100%。这会将元素放在容器的中间位置。

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

但是你希望机芯从下到上。

因此，在底部和屏幕外（top: 50%）一直启动元素，并将其向上移动到容器内部（top: 100%）。
top: 50%规则只是fine-tunes the centering。

如果将transform: translate()应用于主要状态（例如代码中），则会在转换（demo）之前将50％的导航切换到屏幕上。

这就是我将translateY(-50%)仅应用于过渡状态的原因。

有关完整说明，请参阅我的答案：Element will not stay centered, especially when re-sizing screen

具有动画/过渡的中心元素

1 个答案:

jsFiddle