固定されたnavを中心からアニメ化する

Question

私は、（ユーザーがウェイポイントに達すると）スティッキーになると、navbarにアニメーションを追加しようとしています。

何らかの理由で、トランジションは、中央から拡大するのではなく、常に最初の左側にジャンプします。

どのように私はそれをどこから成長させることができますか？

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

何らかの理由で、トランジションは、中央から拡大するのではなく、常に最初の左側にジャンプします。 leftとrightのデフォルト値はautoあるためだ、とあなたは固定位置に切り替えると、「初期」計算左の値をその

は左の要素エッジの前に持っていたものとなります。

単に明示的に両方のための0を指定し、それが動作するはずです：

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

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