动画固定导航从中心

Question

当导航栏变得粘稠时（当用户到达航路点时），我正试图向导航栏添加一个扩展动画。

出于某种原因，过渡总是在开始时跳到左侧，而不是从中心展开。

我如何才能让它从原来的位置"生长"？

HTML:

<header class="header">
  <div class="bg"></div>
  <div id="waypoint"></div>
  <nav class="nav" id="nav">
    <div class="wrapper">
      <div class="container">
        <ul>
          <li>txt</li>
          <li>txt</li>
          <li>txt</li>
          <li>txt</li>
          <li>txt</li>
        </ul>
      </div>
    </div>
  </nav>
</header>

CSS:

.wrapper {
  width: 600px;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 auto;
}
.container {
  max-width: 600px;
  margin: 0 auto;
}
.nav {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.nav.sticky .wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  bottom: auto;
  background: #d0d0d0;
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
  transition: 1s all ease;
}

Javascript只是在用户到达航路点时添加sticky类。

JSFiddle演示-到目前为止我得到了什么。

Answer 1

出于某种原因，过渡总是在开始时跳到左侧，而不是从中心展开。

这是因为left和right的默认值是auto，因此，当切换到固定位置时，"初始"计算的左侧值将变为左侧元素边缘以前的值。

只需显式地为两者指定0，它就可以工作：

.nav.sticky .wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* … */
}

https://jsfiddle.net/1htqqfvb/3/