toggleClass：このCSSはどのように機能しますか？

Question

次のアニメーションを使用しています（Ember JSで再実装）が、このCSSの仕組みを理解していません。以下のリンクを参照してください。

https://codepen.io/designcouch/pen/Atyop

#nav-icon3 span:nth-child(1) { 
    top: 0px; 
} 


#nav-icon3.open span:nth-child(1) { 
    top: 18px; 
    width: 0%; 
    left: 50%; 
} 

toggleClass（ 'オープン'）はdiv要素がクリックされたときにトリガーが、実際open何ですか？それはnav-iconのサブクラスですか？とemberと可能であれば、2つのCSSブロック（開いていない）を切り替えるだけで、アニメーションを表示するだろうか？

Answer 1

toggleClass('open')は、divに 'open'クラスを追加/削除します。 divに 'open'が追加されると、div内の各スパン要素は、擬似nth-child()セレクタによって異なる方法で変更されます。 #nav-icon3のための完全なCSSはここにある：

/* Icon 3 */ 

#nav-icon3 span:nth-child(1) { 
    top: 0px; 
} 

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { 
    top: 18px; 
} 

#nav-icon3 span:nth-child(4) { 
    top: 36px; 
} 

#nav-icon3.open span:nth-child(1) { 
    top: 18px; 
    width: 0%; 
    left: 50%; 
} 

#nav-icon3.open span:nth-child(2) { 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

#nav-icon3.open span:nth-child(3) { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

#nav-icon3.open span:nth-child(4) { 
    top: 18px; 
    width: 0%; 
    left: 50%; 
} 

遷移は以下のコード内のアイコンの内のすべてのスパン要素に設定されています。すべての子スパン要素でアニメーションが発生するには、transition: .25s ease-in-out;が必要です。

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span { 
    display: block; 
    position: absolute; 
    height: 9px; 
    width: 100%; 
    background: #d3531a; 
    border-radius: 9px; 
    opacity: 1; 
    left: 0; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .25s ease-in-out; 
    -moz-transition: .25s ease-in-out; 
    -o-transition: .25s ease-in-out; 
    transition: .25s ease-in-out; 
} 

Answer 2

Jquery Docsに記載されているように、これはパラメータで指定されたcssクラスを単に切り替えるだけです。つまり、このメソッドを呼び出す要素がクラスopenの場合、そのクラスは削除されます。彼らがクラスopenを持っていない場合は、そのcssクラスが与えられます。