CSS-переход с кратким описанием свойств?

519

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

Григорий Болкенштейн
источник
2
Проверьте эту документацию. developer.mozilla.org/en/CSS/CSS_transitions
веб-симфония
3
Вы действительно меняете значения высоты и непрозрачности? В противном случае они не меняются
yunzen
Я не слишком хорошо разбираюсь с переходами CSS - двойные .5sзначения после opacityзапланированных?
BoltClock
В документации не приводится пример использования сокращенной версии с несколькими свойствами. Высота изменяется от 0 до 200 пикселей, непрозрачность от 0 до 1. Второе значение. 5 с - задержка перехода непрозрачности. Я хочу, чтобы элемент увеличивался в высоте, и когда он будет закончен, исчезните.
Грегори Болкенштин
2
Ах да, значение задержки.
BoltClock

Ответы:

752

Синтаксис:

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

Rémi Breton
источник
1
Вы пробовали это? Это не работает для меня. Я также не могу использовать свойство all, так как у меня задержка для второго свойства.
Григорий Болкенштейн
3
Есть ли какие-либо последствия для производительности / памяти / других последствий использования allвместо перечисления конкретных свойств? Например, если я планирую переход backgroundи colorтолько - мне лучше указать оба или просто использовать all? Кроме того, учитывая, что IE6-9 не поддерживает переходы, а IE10 поддерживает их без префикса, есть ли какие-либо преимущества или недостатки в том, что касается включения ms-transition:директив?
mattstuehler
9
Определенно, это влияет на производительность при переходе всех свойств, а не просто того, которое вам нужно. Это может привести к серьезным повреждениям, если у вас есть много элементов, одновременно перенесших все свойства. О ms-transition, я не знаю ни одной причины, теперь, когда IE10 отсутствует, почему кто-то все еще будет использовать ms-transitionвместо стандарта transition. Это не вызовет никаких проблем с обоими, но это, особенно в таблице стилей с интенсивным переходом, раздувает ваш CSS. Что еще более важно, размер файла также примет удар.
Реми Бретон
3
У меня возникла та же проблема, и оказалось, что использование «transition: opacity 1s .5s, max-height .5s 0» не работало, в то время как «transition: opacity 1s .5s, max-height .5s 0s» было. В первый раз я вижу единицу, требуемую для нулевого значения в CSS!
Мларчер
5
Стоит отметить, что использование «all» медленнее, чем указание конкретных свойств.
Натан
433

Если у вас есть несколько конкретных свойств, которые вы хотите перевести таким же образом (потому что у вас также есть некоторые свойства, которые вы не хотите, например 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>

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

Джейсон
источник
4
Это полезно! Не только из-за transition-propertyпереопределения, но и потому, что, например, transition-delayнеобходимо указывать после сокращения (по крайней мере, в webkit). Другими словами, сокращение означает transition-delay«0» и устанавливает отдельную задержку перед тем, как сокращение устанавливает значение «0».
duncanwilcox
@duncanwilcox вы можете сделать transition: [props] [duration] [easing] [delay] в любом современном браузере
Джейсон
9
Предпочитаю этот ответ НАМНОГО больше, чем принятый ответ.
Erutan409
3
симпатичный! очень нравится подход!
wasddd_
36

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

element{
   transition : height 3s ease-out, width 5s ease-in;
}
AhbapAldirmaz
источник
Это то, что я искал - сокращение для нескольких свойств. Спасибо!
Адам Мойса
2

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

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

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

JB
источник
Это также не работает, так как высота будет оставаться 0 во время перехода непрозрачности.
Ксау,
0

Это помогло мне понять / упростить только то, что мне было нужно для анимации:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ Это относится ко всем свойствам перехода (длительность, функция перехода и т. Д.) В классе .base

gav_aus_web
источник
-4

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

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
Томас Ламот
источник