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

278

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

  • 2
    Проверьте эту документацию. developer.mozilla.org/en/CSS/CSS_transitions
  • 2
    Вы действительно меняете значения высоты и непрозрачности? В противном случае они не меняются
Показать ещё 4 комментария
Теги:
css-transitions
webkit

4 ответа

486
Лучший ответ

Синтаксис

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;

Вот простой пример. Вот еще один с свойством delay.

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

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

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

Поделиться
  • 1
    Вы пробовали это? Это не работает для меня. Я также не могу использовать свойство all, так как у меня задержка для второго свойства.
  • 0
    Это работает в Chrome 17, Firefox 10, Safari 5. Нет возможности попробовать IE прямо сейчас :(. Вот jsfiddle: jsfiddle.net/remibreton/qAxnK
Показать ещё 7 комментариев
257

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

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

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

Демо

Поделиться
  • 3
    Это полезно! Не только из-за переопределения transition-property , но и потому, что, например, необходимо указать transition-delay после сокращения (по крайней мере, в webkit). Другими словами, сокращение подразумевает transition-delay 0, и установку отдельной задержки перед тем, как сокращение устанавливает ее обратно в 0.
  • 0
    @duncanwilcox вы можете сделать transition: [props] [duration] [easing] [delay] в любом современном браузере
Показать ещё 2 комментария
2

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

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

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

Поделиться
  • 0
    Это также не работает, так как высота будет оставаться 0 во время перехода непрозрачности.
-1

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

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню