Многоразовые анимации
Интерфейс AnimationOptions в анимации Angular позволяет создавать анимации, которые можно повторно использовать в различных компонентах.
Создание многоразовых анимаций
Чтобы создать многоразовую анимацию, используйте метод animation () для определения анимации в отдельном файле .ts и объявите это определение анимации как переменную экспорта const. Затем вы можете импортировать и повторно использовать эту анимацию в любом из компонентов вашего приложения, используя API `useAnimation () ', как показано в фрагменте кода ниже.
Код TypeScript:
import {
animation, trigger, animateChild, group,
transition, animate, style, query
} from '@angular/animations';
export const transAnimation = animation([
style({
height: '{{ height }}',
opacity: '{{ opacity }}',
backgroundColor: '{{ backgroundColor }}'
}),
animate('{{ time }}')
]);
Демонстрация в реальном времени:
См. Статью « Многоразовая анимация пера » от w3resource ( @ w3resource ) в CodePen .
В приведенном выше фрагменте кода transAnimation используется для повторного использования путем объявления его в качестве переменной экспорта.
Примечание. Входные параметры height, opacity, backgroundColor и time заменяются во время выполнения.
Мы можем импортировать повторно используемую переменную transAnimation в ваш класс компонентов и повторно использовать ее, используя метод 'useAnimation ()', как показано ниже.
Код TypeScript:
import { Component } from '@angular/core';
import { useAnimation, transition, trigger, style, animate } from '@angular/animations';
import { transAnimation } from './animations';
@Component({
trigger('openClose', [
transition('open => closed', [
useAnimation(transAnimation, {
params: {
height: 0,
opacity: 1,
backgroundColor: 'red',
time: '1s'
}
})
])
])
],
})
Демонстрация в реальном времени:
Посмотрите анимацию-переход Pen по w3resource ( @ w3resource ) в CodePen .
Предыдущая: Сложные последовательности
Далее: Безопасность
Новый контент: Composer: менеджер зависимостей для PHP , R программирования