Кажется, я не могу найти правильный синтаксис для сокращения 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. Он достаточно раздутый со всеми префиксами вендора. Также расширен пример кода.
css
webkit
css-transitions
shorthand
Григорий Болкенштейн
источник
источник
.5s
значения послеopacity
запланированных?Ответы:
Синтаксис:
Обратите внимание, что продолжительность должна предшествовать задержке, если она указана.
Индивидуальные переходы объединяются в стенографические объявления:
Или просто перенести их все:
Вот простой пример . Вот еще один со свойством задержки .
Изменить: ранее были перечислены совместимость и известные проблемы, связанные с
transition
. Удалено для удобства чтения.Итог: просто используйте это. Природа этого свойства является непрерывной для всех приложений, и совместимость в настоящее время значительно превышает 94% во всем мире.
Если вы все еще хотите быть уверены, обратитесь к http://caniuse.com/css-transitions
источник
all
вместо перечисления конкретных свойств? Например, если я планирую переходbackground
иcolor
только - мне лучше указать оба или просто использоватьall
? Кроме того, учитывая, что IE6-9 не поддерживает переходы, а IE10 поддерживает их без префикса, есть ли какие-либо преимущества или недостатки в том, что касается включенияms-transition:
директив?ms-transition
, я не знаю ни одной причины, теперь, когда IE10 отсутствует, почему кто-то все еще будет использоватьms-transition
вместо стандартаtransition
. Это не вызовет никаких проблем с обоими, но это, особенно в таблице стилей с интенсивным переходом, раздувает ваш CSS. Что еще более важно, размер файла также примет удар.Если у вас есть несколько конкретных свойств, которые вы хотите перевести таким же образом (потому что у вас также есть некоторые свойства, которые вы не хотите, например
opacity
, переходить ), другой вариант - сделать что-то подобное (префиксы для краткости опущены):Второе объявление переопределяет
all
краткую декларацию выше и делает (иногда) более сжатый код.демонстрация
источник
transition-property
переопределения, но и потому, что, например,transition-delay
необходимо указывать после сокращения (по крайней мере, в webkit). Другими словами, сокращение означаетtransition-delay
«0» и устанавливает отдельную задержку перед тем, как сокращение устанавливает значение «0».transition: [props] [duration] [easing] [delay]
в любом современном браузереЯ с этим работаю:
источник
При задержке в 0,5 с при переходе свойства opacity элемент будет полностью прозрачным (и, следовательно, невидимым) в течение всего времени перехода его высоты. Таким образом, единственное, что вы на самом деле увидите, это изменение непрозрачности. Таким образом, вы получите тот же эффект, что и оставив свойство height вне перехода:
«Переход: непрозрачность .5s .5s;»
Это то, что вы хотите? Если нет, и вы хотите увидеть изменение высоты, вы не можете иметь непрозрачность ноль в течение всего времени перехода.
источник
Это помогло мне понять / упростить только то, что мне было нужно для анимации:
~ Это относится ко всем свойствам перехода (длительность, функция перехода и т. Д.) В классе .base
источник
Я думаю, что работа с этим:
источник