Я не могу найти правильный синтаксис для перехода CSS сокращенного с несколькими свойствами. Это ничего не делает:
.element {
-webkit-transition: height .5s, opacity .5s .5s;
-moz-transition: height .5s, opacity .5s .5s;
-ms-transition: height .5s, opacity .5s .5s;
transition: height .5s, opacity .5s .5s;
height: 0;
opacity: 0;
overflow: 0;
}
.element.show {
height: 200px;
opacity: 1;
}
Я добавляю класс show с javascript. Элемент становится более высоким и видимым, он просто не переходит. Тестирование в последних версиях Chrome, FF и Safari.
Что я делаю неправильно?
EDIT: Чтобы быть ясным, я ищу сокращенную версию для масштабирования моего CSS. Он достаточно раздулся со всеми префиксами поставщиков. Также расширена пример кода.
transition: <property> || <duration> || <timing-function> || <delay> [, ...];
Обратите внимание, что продолжительность должна быть до задержки, если последний указан. Индивидуальные переходы, объединенные в сокращенных объявлениях:
-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
Или просто переместите их все:
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
Вот простой пример. Вот еще один с свойством delay.
Изменить:, ранее перечисленные здесь, были совместимостью и известными проблемами в отношении transition
. Удалено для удобства чтения.
Нижняя строка: используйте ее. Характер этого свойства не нарушается для всех приложений, и совместимость теперь значительно выше 94% в глобальном масштабе.
Если вы все еще хотите быть уверенным, обратитесь к http://caniuse.com/css-transitions
Если у вас есть несколько конкретных свойств, которые вы хотите перевести таким же образом (потому что у вас также есть некоторые свойства, которые вы специально не хотите переходить, скажем opacity
), другой вариант - сделать что-то вроде этого (префиксы опущен для краткости):
.myclass {
transition: all 200ms ease;
transition-property: box-shadow, height, width, background, font-size;
}
Второе объявление переопределяет all
в сокращенном объявлении над ним и делает для (иногда) более сжатый код.
transition-property
, но и потому, что, например, необходимо указать transition-delay
после сокращения (по крайней мере, в webkit). Другими словами, сокращение подразумевает transition-delay
0, и установку отдельной задержки перед тем, как сокращение устанавливает ее обратно в 0.
transition: [props] [duration] [easing] [delay]
в любом современном браузере
Благодаря задержке .5s при переходе свойства непрозрачности элемент будет полностью прозрачным (и, следовательно, невидимым) все время, когда его высота переходит. Так что единственное, что вы на самом деле увидите, это изменение непрозрачности. Таким образом, вы получите тот же эффект, что и выход из свойства height из перехода:
"переход: непрозрачность .5s.5s;"
Это то, чего ты хочешь? Если нет, и вы хотите видеть перепад высот, вы не можете иметь непрозрачность нуля в течение всего времени, когда оно переходит.
Я думаю, что работа с этим:
element{
transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;