Улучшить эту документацию Посмотреть исходный код $animate

Использование

$animate();

Методы

• enter(element, parentElement, afterElement, [doneCallback]);

  Добавляет элемент в родительский элемент, расположенный в документе, а затем выполняет анимацию вставки. После начала анимации следующие классы CSS будут присутствовать на элементе на протяжении всей анимации:

  Ниже приведен разбор каждого шага, выполняемого во время анимации вставки:

  Шаг анимации	Вид атрибута класса элемента
  1. Вызывается $animate.enter(...)	class="my-animation"
  2. Элемент вставляется в родительский элемент или рядом с элементом после	class="my-animation"
  3. $animate выполняет любые JavaScript-анимации элемента	class="my-animation ng-animate"
  4. К элементу добавляется класс .ng-enter	class="my-animation ng-animate ng-enter"
  5. $animate анализирует стили элемента, чтобы получить длительность и задержку CSS-перехода/анимации	class="my-animation ng-animate ng-enter"
  6. $animate ожидает 10 мс (это выполняет перерисовку)	class="my-animation ng-animate ng-enter"
  7. Добавляются классы .ng-enter-active и .ng-animate-active (это запускает CSS-переход/анимацию)	class="my-animation ng-animate ng-animate-active ng-enter ng-enter-active"
  8. $animate ожидает X миллисекунд, чтобы анимация завершилась	class="my-animation ng-animate ng-animate-active ng-enter ng-enter-active"
  9. Анимация завершается, и все сгенерированные классы CSS удаляются из элемента	class="my-animation"
  10. Вызывается обратный вызов doneCallback() (если предоставлен)	class="my-animation"

  Параметры

  Параметр	Тип	Подробности
  element	DOMElement	элемент, который будет в центре внимания анимации вставки
  parentElement	DOMElement	родительский элемент элемента, который будет в центре внимания анимации вставки
  afterElement	DOMElement	элемент-побратим (предшествующий элемент) элемента, который будет в центре внимания анимации вставки
  doneCallback (необязательно)	function()=	функция обратного вызова, которая будет вызвана после завершения анимации

• leave(element, [doneCallback]);

  Выполняет операцию анимации удаления и, по завершении, удаляет элемент из DOM. После начала анимации следующие классы CSS будут добавлены на время анимации:

  Ниже приведен разбор каждого шага, выполняемого во время анимации удаления:

  Шаг анимации	Вид атрибута класса элемента
  1. Вызывается $animate.leave(...)	class="my-animation"
  2. $animate выполняет любые JavaScript-анимации элемента	class="my-animation ng-animate"
  3. К элементу добавляется класс .ng-leave	class="my-animation ng-animate ng-leave"
  4. $animate анализирует стили элемента, чтобы получить длительность и задержку CSS-перехода/анимации	class="my-animation ng-animate ng-leave"
  5. $animate ожидает 10 мс (это выполняет перерисовку)	class="my-animation ng-animate ng-leave"
  6. Добавляются классы .ng-leave-active и .ng-animate-active (это запускает CSS-переход/анимацию)	class="my-animation ng-animate ng-animate-active ng-leave ng-leave-active"
  7. $animate ожидает X миллисекунд, чтобы анимация завершилась	class="my-animation ng-animate ng-animate-active ng-leave ng-leave-active"
  8. Анимация завершается, и все сгенерированные классы CSS удаляются из элемента	class="my-animation"
  9. Элемент удаляется из DOM	...
  10. Вызывается обратный вызов doneCallback() (если предоставлен)	...

  Параметры

  Параметр	Тип	Подробности
  element	DOMElement	элемент, который будет в центре внимания анимации удаления
  doneCallback (необязательно)	function()=	функция обратного вызова, которая будет вызвана после завершения анимации

• move(element, parentElement, afterElement, [doneCallback]);

  Вызывает операцию перемещения DOM. Непосредственно перед началом анимации служба animate либо добавит его в контейнер parentElement, либо добавит элемент непосредственно после элемента afterElement, если он присутствует. Затем будет запущена анимация перемещения. После начала анимации следующие классы CSS будут добавлены на время анимации:

  Ниже приведен разбор каждого шага, выполняемого во время анимации перемещения:

  Шаг анимации	Вид атрибута класса элемента
  1. Вызывается $animate.move(...)	class="my-animation"
  2. Элемент перемещается в элемент parentElement или рядом с элементом afterElement	class="my-animation"
  3. $animate выполняет любые JavaScript-анимации элемента	class="my-animation ng-animate"
  4. К элементу добавляется класс .ng-move	class="my-animation ng-animate ng-move"
  5. $animate анализирует стили элемента, чтобы получить длительность и задержку CSS-перехода/анимации	class="my-animation ng-animate ng-move"
  6. $animate ожидает 10 мс (это выполняет перерисовку)	class="my-animation ng-animate ng-move"
  7. Добавляются классы .ng-move-active и .ng-animate-active (это запускает CSS-переход/анимацию)	class="my-animation ng-animate ng-animate-active ng-move ng-move-active"
  8. $animate ожидает X миллисекунд, чтобы анимация завершилась	class="my-animation ng-animate ng-animate-active ng-move ng-move-active"
  9. Анимация завершается, и все сгенерированные классы CSS удаляются из элемента	class="my-animation"
  10. Вызывается обратный вызов doneCallback() (если предоставлен)	class="my-animation"

  Параметры

  Параметр	Тип	Подробности
  element	DOMElement	элемент, который будет в центре внимания анимации перемещения
  parentElement	DOMElement	родительский элемент элемента, который будет в центре внимания анимации перемещения
  afterElement	DOMElement	элемент-побратим (предшествующий элемент) элемента, который будет в центре внимания анимации перемещения
  doneCallback (необязательно)	function()=	функция обратного вызова, которая будет вызвана после завершения анимации

• addClass(element, className, [doneCallback]);

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

  Ниже приведен разбор каждого шага, выполняемого во время анимации addClass:

  Шаг анимации	Вид атрибута класса элемента
  1. Вызывается $animate.addClass(element, 'super')	class="my-animation"
  2. $animate выполняет любые JavaScript-анимации элемента	class="my-animation ng-animate"
  3. К элементу добавляется класс .super-add	class="my-animation ng-animate super-add"
  4. $animate анализирует стили элемента, чтобы получить длительность и задержку CSS-перехода/анимации	class="my-animation ng-animate super-add"
  5. $animate ожидает 10 мс (это выполняет перерисовку)	class="my-animation ng-animate super-add"
  6. Добавляются классы .super, .super-add-active и .ng-animate-active (это запускает CSS-переход/анимацию)	class="my-animation ng-animate ng-animate-active super super-add super-add-active"
  7. $animate ожидает X миллисекунд, чтобы анимация завершилась	class="my-animation super super-add super-add-active"
  8. Анимация завершается, и все сгенерированные классы CSS удаляются из элемента	class="my-animation super"
  9. Класс super сохраняется на элементе	class="my-animation super"
  10. Вызывается обратный вызов doneCallback() (если предоставлен)	class="my-animation super"

  Параметры

  Параметр	Тип	Подробности
  element	DOMElement	элемент, который будет анимирован
  className	string	класс CSS, который будет добавлен к элементу и затем анимирован
  doneCallback (необязательно)	function()=	функция обратного вызова, которая будет вызвана после завершения анимации

• removeClass(element, className, [doneCallback]);

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

  Ниже представлен разбор каждого шага, происходящего во время анимации removeClass:

  Шаг анимации	Вид атрибута класса элемента
  1. Вызывается $animate.removeClass(element, 'super')	class="my-animation super"
  2. $animate выполняет любые определённые JavaScript-анимации элемента	class="my-animation super ng-animate"
  3. К элементу добавляются классы .super-remove	class="my-animation super ng-animate super-remove"
  4. $animate сканирует стили элемента, чтобы получить длительность и задержку CSS-перехода/анимации	class="my-animation super ng-animate super-remove"
  5. $animate ожидает 10 мс (это выполняет перерисовку)	class="my-animation super ng-animate super-remove"
  6. Добавляются классы .super-remove-active и .ng-animate-active, а .super удаляется (это запускает CSS-переход/анимацию)	class="my-animation ng-animate ng-animate-active super-remove super-remove-active"
  7. $animate ожидает X миллисекунд, чтобы анимация завершилась	class="my-animation ng-animate ng-animate-active super-remove super-remove-active"
  8. Анимация завершается, и все сгенерированные CSS-классы удаляются из элемента	class="my-animation"
  9. Вызывается обратный вызов doneCallback() (если он предоставлен)	class="my-animation"

  Параметры

  Параметр	Тип	Описание
  element	DOMElement	элемент, который будет анимирован
  className	string	CSS-класс, который будет анимирован и затем удалён из элемента
  doneCallback (необязательно)	function()=	функция обратного вызова, которая будет вызвана после завершения анимации

• enabled([value], [element]);

  Глобально включает/отключает анимации.

  Параметры

  Параметр	Тип	Описание
  value (необязательно)	boolean	Если указано, то включить или отключить анимацию.
  element (необязательно)	DOMElement	Если указано, то элемент будет использован для представления операции включения/выключения

  Возвращаемое значение

  boolean

  Текущее состояние анимации.