Beispielerklärung für eine Angular2-Routing-Übergangsanimation

Das Animationssystem von Angular2 bietet die Möglichkeit, verschiedene Animationseffekte zu erzeugen, und ist bestrebt, Animationen mit der gleichen Leistung zu erstellen wie native CSS-Animationen, die hauptsächlich mit @Component kombiniert werden. Die Animationsmetadateneigenschaft wird im @Component-Dekorator definiert. Genau wie Template-Metadatenattribute! Dadurch kann die Animationslogik eng in den Anwendungscode integriert werden, wodurch die Animation einfacher zu starten und zu steuern ist. In diesem Artikel wird hauptsächlich der Beispielcode der Übergangsanimation der Angular2-Serie vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. In app.mudule.ts einführen:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

und Importe in @NgModule hinzufügen:

imports: [BrowserAnimationsModule],

2. Erstellen Sie eine Dateidefinition namens „animations.ts“, um Übergangsanimationen zu schreiben

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from'@angular/core';
// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
// 动画触发器名称
trigger('routeAnimation', [
  state('*',
    style({
      opacity: 1,
      transform: 'translateX(0)'
    })
  ),
  transition(':enter', [
    style({
      opacity: 0,
      transform: 'translateX(-100%)'
    }),
    animate('0.2s ease-in')
  ]),
  transition(':leave', [
    animate('0.5s ease-out', style({
      opacity: 0,
      transform: 'translateY(100%)'
    }))
  ])
]);

3. Auf der Seite, auf der eine Übergangsanimation hinzugefügt werden muss,

import {HostBinding } from '@angular/core'; Fügen Sie einfach die HostBinding hinzu, führen Sie sie nicht noch einmal ein, Sie reden zu viel ...)

Führen Sie dann die Animationsvorlage ein, die Sie geschrieben haben: import { slideInDownAnimation } from '../animation' ;

In @Component hinzufügen: Animationen:[slideInDownAnimation],

Endlich:

  // 添加@HostBinding属性添加到类中以设置这个路由组件元素的动画和样式
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';

Habt ihr es alle gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

So verwenden Sie Vue-Route, um automatisch die Übergangsanimation zum Umblättern nach links und rechts zu ermitteln

JavaScript-Canvas zu Rotationsanimation implementieren

Eine einfache Möglichkeit, ein Angular2.0-Projekt zu erstellen

Das obige ist der detaillierte Inhalt vonBeispielerklärung für eine Angular2-Routing-Übergangsanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!