1 post tagged

transition

#21

Свойство transition. Его вообще все знают, мне кажется.
Сокращённая форма может выглядеть так

transition: opacity 2s linear 1s, color 3s linear;

Можно указывать и каждое свойство по отдельности

transition-property Свойство, к которому будет применяться
transition-duration Продолжительность анимашки
transition-timing-function Временная функция, по которой будет идти анимашка
transition-delay Задержка перед началом транзишна

Поддерживает изменение следующих свойств: background-color, background-position, border-bottom-color, border-bottom-width, border-left-color, border-left-width, border-right-color, border-right-width, border-spacing, border-top-color, border-top-width, bottom, clip, color, font-size, font-weight, height, left, letter-spacing, line-height, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, outline-color, outline-width, padding-bottom, padding-left, padding-right, padding-top, right, text-indent, text-shadow, top, vertical-align, visibility, width, word-spacing, z-index.

Короче самые популярные есть. Как это всё анимируется, в какие значения преобразовывается можно почитать тут.

Интересно следующее: браузеры поддерживают (с вендорными префиксами, как обычно) событие transitionEnd. Если вы хотите забиндиться на такое, то это вполне можно сделать следующим образом:

document.addEventListener("webkitTransitionEnd", function(event){<br>
    // Какой-то код<br>
});

В переменной event есть интересные поля propertyName, pseudoElement, elapsedTime.
В первом хранится название свойства, транзишн которого завершился только что.
Во втором лежит имя псевдо-элемента, начинающееся с двух двоеточий или пустота, если элемента нет.
В третьем цифровое значение, которое сообщает сколько длился транзишн прежде чем произошло событие. Это время не учитывает delay, который может быть указан.

display & transition

Но всё не так хорошо, как может показаться. Например, если мы используем transition для какого-то свойства и при этом меняется свойство display с none на, допустим, block, мы не увидим работающий транзишн. Такая вот особенность имплементации в браузеры. Обойти можно разными способами в зависимости от задачи. К примеру, можно задать блоку ширину и высоту, добавить overflow: hidden, а со скрыванием работать свойством visibility.

 No comments   2013   css   transition