html - 从中心动画固定导航

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 demo - what I got so far .

Answer 1

For some reason, the transition always jumps to the left side at the beginning instead of expanding from the center.

那是因为 left 和 right 的默认值是 auto，因此“初始”计算当您切换到固定位置时，左值变为左元素边缘之前的值。

只需明确地为两者指定 0，它应该可以工作:

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

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