кодесурса
«Угловое

Анимация перехода маршрута

script1adsense2code
script1adsense3code

Маршрутизация позволяет пользователям перемещаться между различными маршрутами в приложении. Когда пользователь переходит от одного маршрута к другому, угловой маршрутизатор сопоставляет путь URL-адреса с соответствующим компонентом и отображает его представление. Анимация этого перехода по маршруту может значительно улучшить взаимодействие с пользователем.

Маршрутизатор Angular поставляется с высокоуровневыми функциями анимации, которые позволяют анимировать переходы между представлениями при изменении маршрута. Чтобы создать последовательность анимации при переключении между маршрутами, необходимо определить вложенные последовательности анимации. Начните с компонента верхнего уровня, который содержит представление, и вложите дополнительные анимации в компоненты, которые содержат встроенные представления.

Чтобы включить анимацию перехода маршрутизации, выполните следующие действия:

Импортируйте модуль маршрутизации в приложение и создайте конфигурацию маршрутизации, которая определяет возможные маршруты.

Добавьте розетку маршрутизатора, чтобы сообщить Angular router, где разместить активированные компоненты в DOM.

Определите анимацию.

Давайте проиллюстрируем анимацию перехода маршрутизатора, перейдя между двумя маршрутами, Home и About, связанными с представлениями `HomeComponent` и` AboutComponent` соответственно. Оба этих представления компонентов являются дочерними для самого верхнего представления, размещенного AppComponent. Мы реализуем анимацию перехода маршрутизатора, которая перемещается в новом представлении вправо и выдвигает старое представление, когда пользователь перемещается между двумя маршрутами.

Конфигурация маршрута:

Для начала настройте набор маршрутов, используя методы, доступные в классе RouterModule. Эта конфигурация маршрута говорит маршрутизатору, как осуществлять навигацию.

Используйте метод RouterModule.forRoot для определения набора маршрутов. Также импортируйте этот RouterModule в массив импорта основного модуля AppModule.

Примечание. Используйте метод RouterModule.forRoot в корневом модуле AppModule для регистрации маршрутов и поставщиков приложений верхнего уровня. Для функциональных модулей вызовите метод RouterModule.forChild, чтобы зарегистрировать дополнительные маршруты.

Следующая конфигурация определяет возможные маршруты для приложения.

Код TypeScript: 


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { OpenCloseComponent } from './open-close.component';
import { OpenClosePageComponent } from './open-close-page.component';
import { OpenCloseChildComponent } from './open-close.component.4';
import { ToggleAnimationsPageComponent } from './toggle-animations-page.component';
import { StatusSliderComponent } from './status-slider.component';
import { StatusSliderPageComponent } from './status-slider-page.component';
import { HeroListPageComponent } from './hero-list-page.component';
import { HeroListGroupPageComponent } from './hero-list-group-page.component';
import { HeroListGroupsComponent } from './hero-list-groups.component';
import { HeroListEnterLeavePageComponent } from './hero-list-enter-leave-page.component';
import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
import { HeroListAutoCalcPageComponent } from './hero-list-auto-page.component';
import { HeroListAutoComponent } from './hero-list-auto.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { InsertRemoveComponent } from './insert-remove.component';
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot([
      { path: '', pathMatch: 'full', redirectTo: '/enter-leave' },
      { path: 'open-close', component: OpenClosePageComponent },
      { path: 'status', component: StatusSliderPageComponent },
      { path: 'toggle', component: ToggleAnimationsPageComponent },
      { path: 'heroes', component: HeroListPageComponent, data: {animation: 'FilterPage'} },
      { path: 'hero-groups', component: HeroListGroupPageComponent },
      { path: 'enter-leave', component: HeroListEnterLeavePageComponent },
      { path: 'auto', component: HeroListAutoCalcPageComponent },
      { path: 'home', component: HomeComponent, data: {animation: 'HomePage'} },
      { path: 'about', component: AboutComponent, data: {animation: 'AboutPage'} },
    ])
  ],

Демонстрация в реальном времени:

Посмотрите маршрутный переход Pen по w3resource ( @ w3resource ) на CodePen .


Пути `home` и` about` связаны с представлениями `HomeComponent` и` AboutComponent`. Конфигурация маршрута указывает Angular-маршрутизатору создавать экземпляры представлений HomeComponent и AboutComponent, когда навигация соответствует соответствующему пути.

В дополнение к пути и компоненту свойство data каждого маршрута определяет специфичную для анимации конфигурацию ключа, связанную с маршрутом. Значение свойства данных передается в AppComponent при изменении маршрута. Вы также можете передать дополнительные данные в конфигурации маршрута, которые используются в анимации. Значение свойства data должно соответствовать переходам, определенным в триггере routeAnimation, который мы определим позже.

Розетка маршрутизатора

После настройки маршрутов скажите маршрутизатору Angular, где следует отображать представления при сопоставлении с маршрутом. Вы можете настроить выход маршрутизатора, вставив контейнер <router-outlet> в корневой шаблон AppComponent.

Контейнер <router-outlet> имеет директиву атрибута, которая содержит данные об активных маршрутах и их состояниях на основе свойства данных, которое мы установили в конфигурации маршрута.

Код TypeScript: 

<div [@routeAnimations]="prepareRoute(outlet)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

Демонстрация в реальном времени:

См. Пример маршрута-перехода Pen по w3resource ( @ w3resource ) в CodePen .


AppComponent определяет метод, который может определять, когда изменяется представление. Метод назначает значение состояния анимации триггеру анимации (@routeAnimation) на основе значения свойства данных конфигурации маршрута. Вот пример метода AppComponent, который определяет, когда происходит изменение маршрута.

Код TypeScript: 

prepareRoute(outlet: RouterOutlet) {
  return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}

Демонстрация в реальном времени:

Посмотрите Pen- router-transition-example-2 от w3resource ( @ w3resource ) на CodePen .


Здесь метод prepareRoute () принимает значение директивы output (устанавливается через # outlet = "outlet") и возвращает строковое значение, представляющее состояние анимации, на основе пользовательских данных текущего активного маршрута. Вы можете использовать эти данные для управления тем, какой переход выполнить для каждого маршрута.

Определение анимации

Анимации могут быть определены непосредственно внутри ваших компонентов. Для этого примера мы определяем анимацию в отдельном файле, что позволяет нам повторно использовать анимации.

В следующем фрагменте кода определяется многократно используемая анимация с именем slideInAnimation.

Код TypeScript: 

export const slideInAnimation =
  trigger('routeAnimations', [
    transition('HomePage <=> AboutPage', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ]),
      query(':enter', [
        style({ left: '-100%'})
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('300ms ease-out', style({ left: '100%'}))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%'}))
        ])
      ]),
      query(':enter', animateChild()),
    ]),
    transition('* <=> FilterPage', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ]),
      query(':enter', [
        style({ left: '-100%'})
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('200ms ease-out', style({ left: '100%'}))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%'}))
        ])
      ]),
      query(':enter', animateChild()),
    ])
  ]);

Демонстрация в реальном времени:

См. Pen vMQmMz от w3resource ( @ w3resource ) в CodePen .


Определение анимации делает несколько вещей:

  • Определяет два перехода. Один триггер может определять несколько состояний и переходов.
  • Настраивает стили хоста и дочерних представлений для управления их взаимным расположением во время перехода.
  • Использует query (), чтобы определить, какое дочернее представление входит, а какое покидает главное представление.

Изменение маршрута активирует триггер анимации, и применяется переход, соответствующий изменению состояния.

Примечание. Состояния перехода должны соответствовать значению свойства данных, определенному в конфигурации маршрута.

Сделайте определение анимации доступным в вашем приложении, добавив повторно используемую анимацию (slideInAnimation) в метаданные анимации AppComponent.

Код TypeScript: 

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [
    slideInAnimation
    // animation triggers go here
  ]
})

Демонстрация в реальном времени:

См. Pen ROqVXq от w3resource ( @ w3resource ) в CodePen .


Стилизация хоста и дочерних компонентов

Во время перехода новый вид вставляется непосредственно после старого, и оба элемента появляются на экране одновременно. Чтобы предотвратить это, примените дополнительные стили к представлению хоста и к удаленным и вставленным дочерним представлениям. Хост-представление должно использовать относительное позиционирование, а дочерние представления должны использовать абсолютное позиционирование. Добавление стилей к представлениям оживляет контейнеры на месте, без DOM, перемещающего вещи.

Код TypeScript: 

trigger('routeAnimations', [
  transition('HomePage <=> AboutPage', [
    style({ position: 'relative' }),
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      })
    ]),

Демонстрация в реальном времени:

См. Pen eoQRYv от w3resource ( @ w3resource ) в CodePen .


Запросы просмотра контейнеров

Используйте метод query (), чтобы найти и анимировать элементы в текущем хост-компоненте. Оператор query (": enter") возвращает вставляемое представление, а query (": left") возвращает удаляемое представление.

Давайте предположим, что мы идем из дома => О.

Код TypeScript: 

query(':enter', [
    style({ left: '-100%'})
  ]),
  query(':leave', animateChild()),
  group([
    query(':leave', [
      animate('300ms ease-out', style({ left: '100%'}))
    ]),
    query(':enter', [
      animate('300ms ease-out', style({ left: '0%'}))
    ])
  ]),
  query(':enter', animateChild()),
]),
transition('* <=> FilterPage', [
  style({ position: 'relative' }),
  query(':enter, :leave', [
    style({
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%'
    })
  ]),
  query(':enter', [
    style({ left: '-100%'})
  ]),
  query(':leave', animateChild()),
  group([
    query(':leave', [
      animate('200ms ease-out', style({ left: '100%'}))
    ]),
    query(':enter', [
      animate('300ms ease-out', style({ left: '0%'}))
    ])
  ]),
  query(':enter', animateChild()),
])

Демонстрация в реальном времени:

См. Pen GLwEge от w3resource ( @ w3resource ) в CodePen .


Код анимации выполняет следующие действия после стилизации представлений:

  • query (': enter style ({left:' -100% '}) соответствует добавленному представлению и скрывает вновь добавленное представление, располагая его в крайнем левом положении.
  • Вызывает animateChild () для покидающего представления, чтобы запустить его дочерние анимации.
  • Использует функцию group (), чтобы внутренние анимации работали параллельно.
  • Внутри функции group ():
  • Запрашивает удаленное представление и анимирует его для скольжения вправо.
  • Слайды в новом виде, анимируя вид с помощью функции замедления и продолжительности.
    Эта анимация приводит к скольжению вида слева направо.

Предыдущая: Безопасность
Далее: Угловой сервисный работник введение

Новый контент: Composer: менеджер зависимостей для PHP , R программирования

script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code