沒有jQuery的CSS轉換

我正在製作一個web應用程序，我想在不同的選項卡之間切換，這些選項卡在數據角色設置爲頁面的部分中設置。我可以很好地切換標籤，但是當我嘗試添加CSS轉換時，它不會執行任何操作。無論我是否有轉換集，應用程序的響應方式都相同，它甚至不會給我一個關於爲什麼不進行轉換的錯誤消息。沒有jQuery的CSS轉換

這裏是我的CSS：

[data-role=page]{ 
    postion: absolute; 
    top: 0; 
    left: 0; 
    display:none; 
    transition: left 0.8s ease; /* faulty transition */ 
    } 

.active{ 
    display:block; 
    } 

.hide{ 
    display: none; 
    }

獸皮和活動類的CSS上面顯示是我使用的選項卡之間進行切換。

來源

2014-02-08 MissElizabeth

我在這裏看到幾件事情。 'position'屬性有一個錯誤，它會阻止動畫執行任何操作（...在這個特定情況下）。另外，在這裏的代碼中，我沒有看到'left'值在任何時候都會改變，這意味着'transition'什麼也不做。我做了這個例子：http：//jsfiddle.net/eWVAc/1/，以證明你需要對你想要動畫的屬性進行更改。 – Joonas

謝謝你爲我製作這個例子。我試過了我的代碼，即使是固定的錯字，也沒有任何過渡。 – MissElizabeth

更改顯示屬性（在你的情況下：從'''display：none'''到'''display：block'''）可能會導致轉換問題。評論他們，看看過渡是否正常工作（http://stackoverflow.com/questions/3331353/transitions-on-the-display-property） – Varinder

css3的transition屬性僅在轉換值更改時起作用。就你而言，如果你想讓你的轉換工作，你將不得不改變元素的左側屬性。也許你可以使用不透明度0和1，而不是隱藏/顯示你的元素，並把你的過渡到這個屬性。

[data-role=page] { 
    position: absolute; 
    top: 0; 
    left:0; 
    display:none; 
    transition:opacity 0.8s ease 
    } 

.active{ 
    opacity:1; 
    } 

.hide{ 
    opacity:0; 
    }

如果您想要在left屬性上轉換。對於這種變化，你應該有價值。

.active{ 
    left:0; 
    } 

.hide{ 
    left:-100%; 
    }

來源

2014-02-08 02:04:33 morgul

沒有jQuery的CSS轉換

回答

相關問題