Автор оригинала: Christian Nwamba.
Анимация в угловом углу 2 не так просто или интуитивно понятно, как вы могли предположить. Тем не менее, это очень просто для достижения.
Чтобы проиллюстрировать, как анимация поведенческих компонентов работает в угловых 2, мы собираемся реализовать jQuery Случайный особенность в угловом приложении, не принося jQuery в поле.
Компонент хоста
Прежде чем добавлять анимацию, идеально подходит для создания компонента, который собирается провести ваши анимации:
// ./app/toggle/toggle.component.ts
import {
Component
} from '@angular/core';
@Component({
selector: 'toggle',
template: `
Там вы идете! Просто базовый угловой компонент с шаблоном и стилями.
Создание анимации
Чтобы добавить анимацию на наш существующий компонент, нам нужно импортировать некоторые участники из @ Угловая/ядра Отказ Эти члены исключительно для целей анимации, так как мы скоро посмотрим:
// ./app/toggle/toggle.component.ts
import {
Component,
// Animation members
trigger, state, animate, transition, style
} from '@angular/core';
Мы обсудим цель для каждого, пока мы используем их.
Анимация
Компонент Meta-Data не заканчивается только с селекторами, шаблонами и стилями. Есть еще одна называется Анимация Отказ Анимация Является ли массив декларативных анимаций, которые мы намерены применить к нашему компоненту:
// ./app/toggle/toggle.component.ts
@Component({
...
animations: [
// Each animation created with 'trigger'
trigger('toggleState', [
// Declare behavior for each state
],
})
Массив анимации может занять столько, сколько вы считаете полезным. Каждый элемент в массиве является триггер Метод вызывается с тем, что он вызывает, и другой массив конфигурации, определяющий, как анимация должна вести себя.
Разумно удивляться, где TOGGLESTATE пришли из. Это будет свойство на шаблоне компонента, на которой анимация будет действовать. Его значения используются для определения того, что происходит во время процесса анимации. В нашем случае мы ожидаем, что значения будут логическими, поэтому давайте скажем угловой, что делать, когда значение является либо правдой, либо ложным:
// ./app/toggle/toggle.component.ts
@Component({
...
animations: [
trigger('toggleState', [
// What happens when toggleState is true
state('true' , style({ maxHeight: '200px' })),
// What happens when toggleState is false
state('false', style({ maxHeight: 0, padding: 0, display: 'none' }))
])
],
})
Что мы пытаемся сделать, это скользить, когда TOGGLESTATE Значение это правда и выскользнуть, когда значение это ложь Отказ Теперь у нас есть очки анимации, как насчет перехода:
Переход
// ./app/toggle/toggle.component.ts
@Component({
...
animations: [
trigger('toggleState', [
state('true' , style({ })),
state('false', style({ maxHeight: 0, padding: 0, display: 'none' })),
// transition
transition('* => *', animate('300ms')),
])
],
})
Переход Метод принимает столовую строку, которая определяет, как будет выполняться анимация. Подстановочный знак ( * ) означает, что из любого данного состояния в другое данное состояние он должен выполнить анимацию для 300 мс. Сломать его, если переход от правда к ложь или ложь к правда , это будет использовать длительность 300 мс, чтобы завершить его
Иллюстрация может не быть желаемым поведением иногда. Вы можете захотеть один переход быть быстрее, чем у другого. Для этого вы можете позвонить в Переход Метод несколько раз:
transition('0 => 1', animate('300ms')),
transition('1 => 0', animate('500ms'))
Запуск анимации
Теперь, когда мы успешно настроили анимацию скольжения, что осталось, это монтировать, это анимация в качестве свойства элементу, которую мы хотим анимировать. В этом случае Div в нашем TOGGLECOMPONENT шаблон;
// ./app/toggle/toggle.component.ts
@Component({
selector: 'toggle',
template: `
TOGGLESTATE Триггер, который мы определены ранее, теперь добавляются к шаблону нашего компонента и передаются в значение. Значение должно быть логическим и может быть установлено по любому событию по вашему выбору, в моем случае событие Click:
// ./app/toggle/toggle.component.ts
import {
Component, Input,
trigger, state, animate, transition, style
} from '@angular/core';
....
export class ToggleComponent {
@Input() shouldToggle = false;
}
Потому что мы получаем значение из родительского компонента, используя Вход Давайте посмотрим, как родительский компонент реализует событие:
// ./app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: `
+
Hello
`,
styleUrls: ['
...
']
})
export class AppComponent{
toggle = false;
handleClick(){
this.toggle = !this.toggle
}
}
Событие срабатывает, когда Fab нажат. Обработчик событий переключает Включить недвижимость с ложь или правда значение. Это значение затем передается на Включить Элемент [Dolloggle] имущество.
Обертывание
Чтобы найти завершенную демонстрацию этого урока, вы можете проверить это здесь
Особенности анимации в угловых 2 – это новое и много других прохладных вещей на пути. Точно так же вы также можете найти здесь угловые 2 основных момента.
Ничто не останавливает вас от использования ваших обычных анимаций CSS3 в угловых 2, но когда речь идет о том, чтобы обработать тяжелое взаимодействие в компонентах вашего приложения, углоснул вас.