緩動過渡似乎並沒有延遲

Question

我有一個具有固定高度和寬度的div，並點擊標籤（複選框技巧）我將div擴展爲100％的寬度和高度。這有效，但問題在於轉型。

我希望創建一個寬鬆過渡，首先寬度擴大，然後高度擴大。然而，在定義轉換時，不會發生緩動，而是像轉換定時功能轉到step-end。過渡不會立即發生（即使延遲高度轉換工作）。

TL;博士：過渡失去平滑

例子：jsFiddle

Answer 1

屬性不能從不同的「度量」轉換。

在基本狀態，您可以指定像素高度;在更改的狀態下，您可以用百分比來指定它。這是行不通的。

你可以設置它以某種方式工作，一些技巧，這是不完全令人滿意;其中最好的是使用最大高度做的修改

#cbox { 
    display:none; 
} 

.someDiv { 
    background: blue; 
    color: white; 
    width: 200px; 
    max-height: 100px; 
    overflow: hidden; 
    height: 100%; 

    transition-property: width, max-height; 
    transition-duration: 2000ms; 
    transition-timing-function: ease; 
    transition-delay: 0, 2000ms; 
} 

#cbox:checked + div { 
    width: 100%; 
    max-height: 1000px; 
} 

我也writen的方式，可以使用多個屬性時，爲您節省一些打字的過渡;請注意，我可以寫緩解只能一次

fiddle

Answer 2

你應該用逗號分隔的屬性，而不是在同一行寫他們，試試這個

CSS

-webkit-transition: width 200ms ease 0s, height 200ms ease 200ms; 
    -moz-transition: width 200ms ease 0s, height 200ms ease 200ms; 
    -ms-transition: width 200ms ease 0s, height 200ms ease 200ms; 
    -o-transition: width 200ms ease 0s, height 200ms ease 200ms; 
    transition: width 200ms ease 0s, height 200ms ease 200ms;