css - примеры - transition не работает




Сокращение перехода CSS с несколькими свойствами? (4)

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

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

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

Demo

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


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

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

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


Синтаксис:

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


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

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






shorthand