緩和過渡似乎不適用於延遲

Question

我有一個固定高度和寬度的div，點擊標簽（復選框技巧）后，我將div展開為100％的寬度和高度。 這是有效的，但問題在於轉型。

我希望創建一個緩動過渡，首先寬度擴展然后高度擴展。 然而，在定義轉換時，緩和不會發生，而是像轉換計時功能轉到step-end 。 轉換立即發生而不會緩和（即使高度轉換的延遲有效）。

tl;博士：過渡失去順暢

示例： jsFiddle

Answer 1

您應該使用逗號分隔屬性，而不是將它們寫在同一行中，試試這個

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;

Answer 2

屬性不能從不同的“指標”轉換。

在基本狀態中，您以px指定高度; 在更改狀態中，您以百分比指定它。 那不行。

你可以設置它以某種方式工作，但並不完全令人滿意; 其中最好的是使用max-height進行更改

#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;
}

我還在使用多個屬性時可以節省一些打字的方式編寫轉換; 注意我只能寫一次輕松

小提琴