嘗試在類更改上執行CSS轉換

Question

想知道在div給定某個類時是否有辦法執行css轉換。我最好的例子是這個網站http://ideaware.co/

當你向下滾動並且頭部變得固定時，它做了背景顏色變化並具有不透明性。真的很好看。

我正在使用我在這裏的模板http://www.niviholdings.com/collide/，我想要做的是在< nav>變得固定時，我想< ul>向右滑動。

希望我正確地解釋這一點。

Answer 1

2點，我發現可能幫助：

從轉換爲固定值可能是一個問題。最終，您可以嘗試將.main-nav-ul的margin-left設置爲每個默認值的固定值，而不僅僅是在粘滯時。

第二個是（這是hacky）。嘗試爲您的課程套用.main-nav-ul延遲：

setTimeout(function() { 
    $('.main-nav-ul').addClass('nav-slide'); // line 57 in jquery.sticky.js 
}, 100); 

Answer 2

4個簡易步驟

1. CSS過渡確保你想要做什麼是可能的CSS轉換。你可以通過checking the W3C docs來完成。

2. 將過渡和起始樣式添加到基本元素。

3. 添加具有已更改樣式的類或狀態。

4. 添加一個機制來添加類（如果適用）。

快速示例，假設您想在:hover上設置動畫邊距變化。你只是這樣做：

element { 
    margin-left: 10px; 
    transition: margin-left linear .5s; 
} 

element:hover { 
    margin-left: 0; 
} 

And here's a quick demo.

Answer 3

當然可以......

#someElement { 
    background: red; 
    position: relative; 
    -webkit-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    transition: all 1s linear; 
    left: 0; 
} 

#someElement.someClass { 
    background: green; 
    left: 50px; 
} 

DEMO