Ускоренный переход, похоже, не работает на задержку

Question

У меня есть div с фиксированной высотой и шириной и при нажатии на метку (трюк checkbox) я расширяю div до 100% ширины и высоты. Это работает, однако проблема заключается в переходе.

Я хочу создать переход, где сначала ширина расширяется, а затем высота расширяется. Однако при определении переходов ослабление не происходит, вместо этого это похоже на функцию временной синхронизации, которая идет на step-end. Переход происходит мгновенно без ослабления (хотя работает задержка на преобразовании высоты).

ТЛ; др: переход теряет гладкость

Пример: jsFiddle

Answer 1

Свойства не могут быть перенесены из разных «показателей».

В базовом состоянии вы указываете высоту в px; в измененном состоянии вы указываете его в процентах. Это не сработает.

Вы можете настроить его как-то с некоторыми трюками, которые не являются полностью удовлетворительными; лучшим из них является использование макс-высоту, чтобы сделать Изменение

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

Я также прописан переход на путь, который может сэкономить некоторое набрав при использовании нескольких свойств; обратите внимание, что я могу написать только облегчить раз

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;