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的一個子類嗎？如果它可能與燼，簡單地切換兩個CSS塊（打開和不）顯示動畫？

Answer 1

toggleClass('open')增加/刪除類'打開'的股利。當「開放」被添加到div時，div內的每個span元素將以不同的方式通過僞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%; 
} 

的過渡上設置的在下面的代碼中的圖標內的所有span元素。您需要存在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類。