Сокращение перехода CSS с несколькими свойствами?

Я не могу найти правильный синтаксис для перехода 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. Он достаточно раздулся со всеми префиксами поставщиков. Также расширена пример кода.

Ответ 1

Синтаксис:

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;

Вот простой пример. Вот еще один со свойством задержки.

Изменить: ранее были перечислены совместимость и известные проблемы, связанные с transition. Удалено для удобства чтения.

Итог: просто используйте это. Природа этого свойства является непрерывной для всех приложений, и совместимость в настоящее время значительно превышает 94% во всем мире.

Если вы все еще хотите быть уверены, обратитесь к http://caniuse.com/css-transitions

Ответ 2

Если у вас есть несколько конкретных свойств, которые вы хотите перевести таким же образом (потому что у вас также есть некоторые свойства, которые вы специально не хотите переходить, скажем, opacity), другой вариант - сделать что-то вроде этого (префиксы для краткости опущены):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

Второе объявление переопределяет all в кратком объявлении над ним и делает (иногда) более сжатый код.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

Ответ 3

Я с этим работаю:

element{
   transition : height 3s ease-out, width 5s ease-in;
}

Ответ 4

Благодаря задержке .5s при переходе свойства непрозрачности элемент будет полностью прозрачным (и, следовательно, невидимым) все время, когда его высота переходит. Так что единственное, что вы на самом деле увидите, это изменение непрозрачности. Таким образом, вы получите тот же эффект, что и выход из свойства height из перехода:

"переход: непрозрачность .5s.5s;"

Это то, чего ты хочешь? Если нет, и вы хотите видеть перепад высот, вы не можете иметь непрозрачность нуля в течение всего времени, когда оно переходит.

Ответ 5

Я думаю, что работа с этим:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;