Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Переходы и анимации/ CSS-переходы

  1. Базовый уровень

    • Переходящие свойства

      Выбирает свойства, для которых создаются CSS transitions.

    • Длительность перехода

      Задаёт продолжительность перехода с допустимым неотрицательным временем.

    • Задержка перехода

      Смещает начало перехода относительно style change.

    • Easing перехода

      Назначает easing function для преобразования progress перехода.

    • Transition shorthand

      Собирает property, duration, easing и delay в один transition item.

    • Смена состояния

      Получает плавное изменение между исходным и новым computed value свойства.

  2. Продвинутый уровень

    • Согласование transition-списков

      Повторяет короткие списки и отбрасывает лишние элементы относительно `transition-property`.

    • Развёртка transition-property

      Создаёт отдельные transitions для подходящих longhands, указанных shorthand или `all`.

    • Приоритет повторного свойства

      Выбирает последний подходящий transition item при нескольких совпадениях одного longhand.

    • Отрицательная задержка

      Начинает transition сразу с уже прошедшей части active interval.

    • Before-change и after-change styles

      Различает исходный и целевой computed style, используемые для generation.

    • Прерывание перехода

      Определяет текущий animated value при изменении цели незавершённого transition.

    • Замена перехода

      Заменяет или отменяет running transition при изменении target value и transition declarations.

    • События перехода

      Различает `transitionrun`, `transitionstart`, `transitionend` и их lifecycle positions.

    • Отмена перехода

      Определяет условия отмены running transition и появления `transitioncancel`.

    • Discrete transitions

      Включает переход для discrete animation type через `allow-discrete`.

    • Starting style

      Использует `@starting-style` вместо отсутствующего before-change style.

  3. Экспертный уровень

    • Style change event

      Группирует одновременные computed-value changes в одну generation opportunity.

    • Generation transitions

      Применяет нормативные условия запуска, сохранения, замены и отмены transition.

    • Running и completed transitions

      Поддерживает взаимоисключающие состояния transition одного элемента и свойства.

    • Reversing-adjusted start value

      Вычисляет скорректированную исходную точку при обратном изменении цели.

    • Reversing shortening factor

      Сокращает обратный transition пропорционально уже пройденной части пути.

    • Phase-based event dispatch

      Определяет последовательность transition events по изменениям idle, pending, before, active и after phases.

    • Transition elapsed time

      Вычисляет `elapsedTime` события с учётом delay, cancellation, seek и reverse.