動畫jQuery的移動可縮放與css

Question

如何使jQuery的移動可摺疊的內容與動畫使用CSS過渡出現？

.ui-collapsible { 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 

不工作。

Answer 1

jQuery Mobile的的可摺疊的元素顯示和隱藏。據我所知，當display屬性發生變化時，所有主流瀏覽器都會禁用CSS轉換。

另一種方法是壓倒一切的jQuery Mobile的默認CSS總是使用display: block爲可摺疊的內容DIV，然後在height或opacity財產過渡（取決於內容是否需要被「刪除」，從佈局）。

我創建了這個jsFiddle，用於演示使用opacity屬性的轉換。它實際上只是一個使用下列CSS規則的事情：

.ui-collapsible-content { 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
    opacity: 1; 
} 
.ui-collapsible-content-collapsed { 
    display: block; 
    opacity: 0 
} 

過渡使用height屬性是作爲內容div有沒有設定高度有點麻煩。這fiddle做的伎倆（也見下面的CSS），但它需要設置內容div的高度。您可以將高度更改爲auto，但在我看來，滑下效果看起來不太正確。也許別人知道更好的方法。

.ui-collapsible-content { 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
    height: 2em; /* or auto */ 
    overflow: hidden; 
} 
.ui-collapsible-content-collapsed { 
    display: block; 
    height: 0; 
    padding: 0 16px; 
} 

Answer 2

我認爲你必須創建自定義基於CSS的過渡： - 通過在可摺疊內容的DIV切換display: none

Refer This

Answer 3

.ui-collapsible-content { 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
    opacity: 1; 
} 
.ui-collapsible-content-collapsed { 
    display: block; 
    opacity: 0 
}