1. Что такое состояние
? Состояние представляет собой стиль элемента, который необходимо перемещать на разных этапах перемещения. [Рекомендуемые связанные учебные пособия: «учебник по Angular»]
2. Типы состояний
. В Angular есть три типа состояний: void , * , custom 
void : это состояние возникает, когда элемент создан в памяти, но еще не добавлен в DOM или элемент удален из DOM
* : Состояние после того, как элемент вставлен в дерево DOM или является элементом, уже находящимся в дереве DOM. Состояние дерева DOM, также называемое состоянием по умолчанию
. custom : пользовательское состояние, элемент находится на странице по умолчанию и перемещается из одного состояния в другое, например, при сворачивании и раскрытии панели.
3. Анимация входа и выхода.
Анимация входа означает, что элемент появляется перед пользователем в виде анимации после его создания. Состояние анимации входа обозначается void => * , а псевдоним :enter
Анимация выхода — это прощальная анимация, выполняемая перед удалением элемента. Статус анимации выхода — * => void , а псевдоним — :leave
1. Перед использованием функции анимации необходимо ввести модуль анимации, а именно BrowserAnimationsModule
импортировать { BrowserAnimationsModule } из "@angular/platform-browser/animations"
@NgModule({
импорт: [BrowserAnimationsModule],
})
класс экспорта AppModule {} 2. Анализ кода по умолчанию, задача удаления и добавления задачи
<!-- Представляем bootstrap.min.css в файле index.html --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<div class="container">
<h2>Задачи</h2>
<div class="form-group">
<input (keyup.enter)="addItem(input)" #input type="text" class="form-control" Placeholder="добавить задачи" />
</div>
<ul class="list-group">
<li (click)="removeItem(i)" *ngFor="let элемент задач; let i = index" class="list-group-item">
{{ элемент }}
</li>
</ul>
</div> импортировать {компонент } из "@angular/core"
@Компонент({
селектор: "app-root",
templateUrl: "./app.comComponent.html",
стили: []
})
класс экспорта AppComponent {
// список задач todos: string[] = ["Изучить Angular", "Изучить RxJS", "Изучить NgRx"]
// добавляем задачу
addItem (вход: HTMLInputElement) {
this.todos.push(input.value)
input.value = ""
}
// Удалить задачу
RemoveItem (индекс: число) {
this.todos.splice(индекс, 1)
}
} 3. Создание анимации.
Метод триггера используется для создания анимации, а
метод перехода используется для указания имени анимации. Метод перехода используется для указания состояния движения анимации, анимации выхода или анимации входа или пользовательского состояния. анимация.
Метод style используется для установки стиля, соответствующего элементу в различных состояниях.
Метод animate используется для установки параметров движения, таких как время движения анимации, задержанные события и формы движения
@Component({).
анимации: [
//Создаем анимацию, имя анимации — слайд
триггер("слайд", [
//Укажите анимацию входа. Примечание. С обеих сторон строки не может быть пробелов, а с обеих сторон стрелки могут быть или не быть пробелы. // void => * можно заменить на: enter.
переход("void => *", [
// Укажите стиль элемента перед тем, как он войдет в style({ opacity: 0, Transform: "translateY(40px)" }),
//Указываем стиль и параметры движения элемента после входа в сцену animate(250, style({ opacity: 1, Transform: "translateY(0)" }))
]),
//Укажите анимацию выхода// * => void можно заменить на:leave
переход("* => void", [
//Указываем стиль и параметры движения элемента после его появления animate(600, style({ opacity: 0, Transform: "translateX(100%)" }))
])
])
]
}) Примечание. Вам не нужно указывать состояние элемента по умолчанию во входной анимации. Angular очистит состояние void как
триггер состояния по умолчанию («слайд», [).
переход(":введите", [
style({ opacity: 0, Transform: "translateY(40px)" }),
оживить(250)
]),
переход(":уйти", [
animate(600, style({ opacity: 0, Transform: "translateX(100%)" }))
])
]) Примечание. Чтобы установить параметры движения анимации, необходимо изменить один параметр метода animate на строковый тип
// общее время выполнения анимации, время задержки (необязательно), форма движения (необязательно).
animate("600ms 1s easy-out", style({ opacity: 0, Transform: "translateX(100%)" })) Анимация ключевых кадров определяется с использованием метода keyframes .
переход(":уйти", [
оживить(
600,
ключевые кадры([
style({ offset: 0.3, Transform: "translateX(-80px)" }),
стиль ({ смещение: 1, преобразование: "translateX (100%)" })
])
)
]) Angular предоставляет две функции обратного вызова, связанные с анимацией, соответственно, когда анимация начинается и после ее завершения.
<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
import { AnimationEvent } из "@angular/animations"
начало (событие: AnimationEvent) {
console.log(событие)
}
сделано (событие: AnimationEvent) {
console.log(событие)
} 1. Поместите определение анимации в отдельный файл, чтобы облегчить вызов нескольких компонентов.
импортировать { анимацию, ключевые кадры, стиль, переход, триггер } из "@angular/animations"
экспортировать const слайд = триггер("слайд", [
переход(":введите", [
style({ opacity: 0, Transform: "translateY(40px)" }),
оживить(250)
]),
переход(":уйти", [
оживить(
600,
ключевые кадры([
style({ offset: 0.3, Transform: "translateX(-80px)" }),
стиль ({ смещение: 1, преобразование: "translateX (100%)" })
])
)
])
]) импортировать { слайд } из "./animations"
@Компонент({
анимация: [слайд]
}) 2. Извлеките определенные определения анимации для облегчения вызова нескольких анимаций.
импортировать {animate, анимацию, ключевые кадры, стиль, переход, триггер, useAnimation} из "@angular/animations"
экспортировать const слайдInUp = анимацию([
style({ opacity: 0, Transform: "translateY(40px)" }),
оживить(250)
])
экспортировать const слайдOutLeft = анимацию([
оживить(
600,
ключевые кадры([
style({ offset: 0.3, Transform: "translateX(-80px)" }),
стиль ({ смещение: 1, преобразование: "translateX (100%)" })
])
)
])
экспортировать const слайд = триггер("слайд", [
переход(":enter", useAnimation(slideInUp)),
переход(":оставить", useAnimation(slideOutLeft))
]) 3. При вызове анимации передавайте
общее время движения, время задержки и форму движения.
[
style({ opacity: 0, Transform: "translateY(40px)" }),
animate("{{ продолжительность }} {{ задержка }} {{ ослабление }}")
],
{
параметры: {
продолжительность: «400 мс»,
задержка: «0 с»,
смягчение: «облегчение»
}
}
) переход(":enter", useAnimation(slideInUp, {params: {delay: "1s"}})) Angular предоставляет метод query для поиска элементов и создания для них анимации.
импортировать { слайд } из "./animations"
анимации: [
слайд,
триггер("todoAnimations", [
переход(":введите", [
запрос("h2", [
style({ Transform: "translateY(-30px)" }),
оживить(300)
]),
// Запрашиваем дочернюю анимацию для выполнения query("@slide", animateChild())
])
])
] <div class="container" @todoAnimations>
<h2>Задачи</h2>
<ul class="list-group">
<ли
@слайд
(нажмите)="removeItem(i)"
*ngFor="let элемент задачи; let i = индекс"
класс = "список-группа-элемент"
>
{{ элемент }}
</li>
</ul>
</div> По умолчанию родительская анимация и дочерняя анимация выполняются по порядку, а затем выполняется дочерняя анимация. Вы можете использовать метод group , чтобы сделать ее параллельной
триггер("todoAnimations", [.
переход(":введите", [
группа([
запрос("h2", [
style({ Transform: "translateY(-30px)" }),
оживить(300)
]),
запрос("@slide", animateChild())
])
])
]) Angular предоставляет метод stagger для задержки выполнения анимации каждого элемента по очереди, когда несколько элементов одновременно выполняют одну и ту же анимацию.
переход(":введите", [
группа([
запрос("h2", [
style({ Transform: "translateY(-30px)" }),
оживить(300)
]),
query("@slide", stagger(200, animateChild()))
])
]) Примечание. Метод stagger может использовать внутри метода запроса.
Angular предоставляет метод state для определения состояния.
1. Анализ кода по умолчанию
<div class="container">
<div class="панель-панель-по умолчанию">
<div class="panel-heading" (click)="toggle()">
Одна платформа, несколько платформ, мобильных и настольных компьютеров</div>
<div class="panel-body">
<р>
Используйте простые декларативные шаблоны для быстрой реализации различных функций. Расширьте язык шаблонов с помощью пользовательских компонентов и широкого спектра существующих компонентов. Получите поддержку Angular практически в любой IDE.
за мгновенную помощь и обратную связь. Все это для того, чтобы помочь вам писать красивые приложения, а не ломать голову над тем, чтобы код «работал».
</p>
<р>
От прототипа до глобального развертывания Angular может обеспечить вам поддержку Google.
Высокомасштабируемая инфраструктура и технологии для крупномасштабных приложений.
</p>
<р>
Получите доступ к Интернету сегодня (и завтра) с помощью Web Workers и серверного рендеринга.
Самая высокая скорость, достижимая на платформе. Angular дает вам эффективный контроль над масштабируемостью. Основанный на RxJS, Immutable.js и других моделях push-уведомлений, он может адаптироваться к огромным требованиям к данным.
</p>
<р>
Научитесь использовать Angular
Создавайте приложения, а затем повторно используйте этот код и возможности в приложениях на различных платформах.
Интернет, мобильный Интернет, мобильные приложения, нативные приложения и нативные приложения для настольных компьютеров.
</p>
</div>
</div>
</div>
<стиль>
.контейнер {
маржа сверху: 100 пикселей;
}
.panel-heading {
курсор: указатель;
}
</style> импортировать {компонент } из "@angular/core"
@Компонент({
селектор: "app-root",
templateUrl: "./app.comComponent.html",
стили: []
})
класс экспорта AppComponent {
isExpended: логическое значение = ложь
переключать() {
this.isExpended = !this.isExpended
}
} 2. Создайте
триггер анимации("expandCollapse", [
// Используйте метод состояния, чтобы определить стиль, соответствующий свернутому элементу состояния state(
«рухнул»,
стиль({
высота: 0,
переполнение: «скрыто»,
отступТоп: 0,
отступНиз: 0
})
),
// Используйте метод состояния, чтобы определить стиль, соответствующий расширенному элементу состояния. state("expanded", style({ height: "*", overflow: "auto" })),
// Определить анимацию расширения
// Определить анимацию складывания переход("расширено => свернуто", animate("400 мс легкость"))
]) <div class="panel-body" [@expandCollapse]="isExpended ? 'expanded': 'collapsed'"></div>
1. Добавьте к маршруту идентификатор состояния. Этот идентификатор является пользовательским состоянием, когда маршрут выполняет анимацию
const маршрутов: Routes = [.
{
путь: "",
компонент: HomeComponent,
pathMatch: «полный»,
данные: {
анимация: «один»
}
},
{
путь: «о»,
компонент: ОКомпонент,
данные: {
анимация: «два»
}
},
{
путь: "новости",
компонент: NewsComponent,
данные: {
анимация: «три»
}
}
] 2. Получите идентификатор состояния маршрутизации через объект сокета маршрутизации и передайте идентификатор вызывающему объекту анимации, чтобы анимация могла выполнить текущее состояние
<div class="routerContainer" [@routerAnimations]=" подготовитьRoute(выход)" > <router-outlet #outlet="outlet"></router-outlet> </div>
import { RouterOutlet } из "@angular/router"
класс экспорта AppComponent {
подготовитьRoute (выход: RouterOutlet) {
возвращаться (
выход &&
outt.activatedRouteData &&
Outlet.activatedRouteData.animation
)
}
} 3. Установите для routerContainer относительное позиционирование, а для его прямых дочерних элементов первого уровня — абсолютное позиционирование
/*styles.css */
.routerContainer {
положение: относительное;
}
.routerContainer > * {
позиция: абсолютная;
слева: 0;
верх: 0;
ширина: 100%;
} 4. Создайте
триггер анимации("routerAnimations", [
переход("один => два, один => три, два => три", [
query(":enter", style({transform: "translateX(100%)", opacity: 0 })),
группа([
запрос(
":входить",
оживить(
«Облегчение 0,4 с»,
стиль ({ преобразование: "translateX (0)", непрозрачность: 1 })
)
),
запрос(
":оставлять",
оживить(
«Облегчение 0,4 с»,
стиль({
преобразование: "translateX(-100%)",
Непрозрачность: 0
})
)
)
])
]),
переход("три => два, три => один, два => один", [
запрос(
":входить",
стиль ({ преобразование: "translateX (-100%)", непрозрачность: 0 })
),
группа([
запрос(
":входить",
оживить(
«Облегчение 0,4 с»,
стиль ({ преобразование: "translateX (0)", непрозрачность: 1 })
)
),
запрос(
":оставлять",
оживить(
«Облегчение 0,4 с»,
стиль({
преобразование: "translateX(100%)",
Непрозрачность: 0
})
)
)
])
])
]) Для получения дополнительной информации о программировании посетите: Видео по программированию! !
Вышеупомянутое - что такое статус? Узнайте больше об анимации в Angular. Для получения дополнительной информации обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP!