Полный список эффектов

Библиотека Zepto предоставляет компактный набор анимационных возможностей, позволяющих изменять CSS-свойства элементов плавно и без избыточного кода. Реализация эффектов основана на методе animate, а также вспомогательных методах, упрощающих типичные сценарии скрытия, показа и затухания.

Базовый метод animate

Метод animate принимает объект целевых CSS-свойств и продолжительность. Поддерживаются линейная интерполяция и различные значения времени выполнения. Пример вызова на элементе:

$(el).animate({ opacity: 0.5, left: '50px' }, 400);

Внутренний цикл анимации использует requestAnimationFrame при наличии поддержки браузера, что минимизирует мерцание и обеспечивает более стабильный FPS. В отсутствие поддержки используется таймер с задержкой.

Дополнительными параметрами animate могут быть:

  • duration — время выполнения в миллисекундах.
  • easing — способ интерполяции, по умолчанию линейный.
  • complete — колбэк по завершению анимации.
  • delay — пауза перед началом.

Эффект show и hide

Методы show и hide формируют минимальные CSS-изменения, отключая или включая элемент в визуальном дереве. При наличии аргумента времени переход осуществляется плавно с использованием animate.

$(el).show(300);
$(el).hide(300);

В процессе show восстанавливаются последние значения display и opacity, если они были изменены анимацией. При hide элемент получает display: none после завершения перехода.

Эффект toggle

Метод toggle переключает видимость элемента между состояниями show и hide. При передаче длительности вызывается анимация, иначе поведение мгновенное:

$(el).toggle(250);

Внутренний алгоритм определяет текущее состояние элемента по свойству display.

Эффекты затухания

Поддерживаются эффекты постепенного изменения прозрачности через fadeIn, fadeOut и fadeToggle. Все три метода используют изменение opacity в диапазоне от 0 до 1, сохраняя предыдущее значение display.

Особенности:

  • fadeIn переводит элемент от opacity: 0 к 1.
  • fadeOut осуществляет обратный переход.
  • fadeToggle выбирает направление автоматически.
$(el).fadeIn(300);
$(el).fadeOut(300);
$(el).fadeToggle(300);

При завершении fadeOut устанавливается display: none, при fadeIn — исходное значение display.

Эффекты вертикального раскрытия

Методы slideDown, slideUp и slideToggle имитируют вертикальное раскрытие блока путем анимирования height и внутренних вертикальных отступов.

Принципы работы:

  • Исходная высота определяется через временное вычисление размеров с position: absolute и visibility: hidden.
  • Для slideUp высота изменяется от текущей к 0.
  • Для slideDown наоборот — от 0 до вычисленной высоты.
  • slideToggle определяет направление автоматически.
$(el).slideDown(400);
$(el).slideUp(400);
$(el).slideToggle(400);

Кастомные цепочки эффектов

Перечисленные эффекты могут сочетаться в цепочке вызовов. Zepto хранит очередь эффектов на каждом элементе и выполняет их последовательно. Допускается явное указание задержек между этапами через метод delay.

$(el)
  .fadeOut(200)
  .delay(150)
  .slideDown(300)
  .animate({ opacity: 1 }, 200);

Очередь очищается при вызове stop, позволяя завершить переходы преждевременно. При stop(true, true) отменяются и очередные эффекты, и текущая анимация, при этом свойства устанавливаются в конечные значения.

Работа с плавностью переходов

Zepto реализует простой набор функций сглаживания: linear и ease. В пользовательском коде возможно переопределение easing-функций, предоставив собственную реализацию через расширение прототипа. Единицей времени служат миллисекунды.

При анимации числовые значения свойств интерполируются классическим способом, строковые величины с единицами (px, %, em) корректно разбираются и приводятся к числовому типу. Несовместимые типы свойств пропускаются.

Анимация CSS-трансформаций

Метод animate способен изменять свойства transform, такие как translate, scale и rotate. Анимация трансформаций выполняется путем интерполяции числовых параметров и синтеза итоговой строки для свойства transform.

$(el).animate({ translateX: '100px', rotate: '45deg' }, 500);

Для браузеров без поддержки transform соответствующие свойства игнорируются. При анимации нескольких трансформаций порядок сохраняется в соответствии с вызовом.

Прерывание и управление состояниями

Каждый эффект может быть прерван при вызове stop или finish. В случае finish все эффекты мгновенно переходят к конечным значениям. Это удобно при синхронизации сложных интерфейсов.

События animationstart, animationend и animationcancel не используются Zepto напрямую, но могут быть подписаны через DOM-API. Zepto ограничивается собственным колбэком complete и системой очередей.

Поддерживаемые свойства для анимации

Анимации корректно работают для свойств:

  • opacity
  • height
  • width
  • margin, padding (вертикальные и горизонтальные отдельно)
  • top, left, right, bottom
  • transform и его параметры

Цветовые свойства не интерполируются, так как отсутствует встроенный конвертер значений.

Взаимодействие со стилями

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

Компактность и зависимость от браузера

Все эффекты ориентированы на современную поддержку WebKit и совместимые ядра, за счет чего достигается небольшая масса библиотеки. Функции fallback минимальны и не гарантируют идеального поведения в старых браузерах.

Таким образом, полный набор эффектов в Zepto сосредоточен вокруг методов animate, show/hide, toggle, fade* и slide*, образуя компактный и функциональный инструментарий для анимации интерфейсов без избыточных зависимостей.

Оглавление