CSS переход с краткой записью свойств

Question

Не получается найти правильный синтаксис для перехода 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;
}

Я добавляю класс шоу с помощью JavaScript. Элемент становится выше и видимым, он просто не переходит. Тестирование в последних версиях Chrome, FF и Safari.

Что я делаю не так?

РЕДАКТИРОВАТЬ: Просто чтобы быть ясно, я ищу сокращенную версию, чтобы уменьшить мой CSS. Он достаточно раздут со всеми префиксами вендора. Также расширен пример кода.

Answer 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

Answer 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>

Демо

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

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