Сокращение перехода 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; } 

Я добавляю class show с javascript. Элемент становится более высоким и видимым, он просто не переходит. Тестирование в последних версиях Chrome, FF и Safari.

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

EDIT: Чтобы быть ясным, я ищу сокращенную версию, чтобы уменьшить мой CSS. Он достаточно раздутый со всеми префиксами поставщиков. Также расширена пример кода.

Синтаксис:

 transition:  ||  ||  ||  [, ...]; 

Обратите внимание, что продолжительность должна быть до задержки, если последний указан.

Индивидуальные переходы, объединенные в сокращенные декларации:

 -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 в сокращенной декларации над ней и делает (иногда) более сжатый код.

демонстрация

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

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

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

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

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

Переходы CSS управляются с использованием свойства сокращенного перехода. Это лучший способ настройки переходов, поскольку это позволяет избежать того, что длины списка параметров не синхронизированы, что может быть очень расстраивающим, чтобы тратить много времени на отладку CSS.

Вы можете управлять отдельными компонентами перехода со следующими суб-свойствами:

  1. переход-недвижимость
  2. Продолжительность перехода
  3. переходное время функция
  4. Переход задержки

Строковый синтаксис CSS написан следующим образом:

div { transition: ; }

Примечание. Однако переход -delay является необязательным свойством.

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

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

Как вырезать и вставить электронное письмо, чтобы вставить текст в чистый текст (удаление всех html)

Как я могу получить размер массива из указателя в C?

html, css – странный невидимый край ниже картин

Как я могу получить путь к папке «Данные приложения» текущего пользователя?

В чем разница между анонимными методами (C # 2.0) и lambda-выражениями (C # 3.0)?

Есть ли конвертер printf для печати в двоичном формате?

Можете ли вы установить разные цвета текста для разных «уровней списка» в Word 2007?

Как я могу исправить ошибку Microsoft Visual Studio: «Пакет неправильно загружен»?

Наибольшее и наименьшее число в массиве

Представление или его мастер не были найдены или механизм просмотра не поддерживает найденные местоположения

Использование TrueCrypt: возможно ли 1 разблокировать пароль 2 тома?

Android – предотrotation перезагрузки WebView при повороте

Как сгладить вложенные объекты с выражением linq

Как разбить .zip-файл на несколько сегментов?

Обновить поле с другим значением поля в документе

Давайте будем гением компьютера.