Explication de l'exemple d'animation de transition de routage Angular2

Le système d'animation d'Angular2 donne la possibilité de produire divers effets d'animation et s'engage à créer des animations avec les mêmes performances que les animations CSS natives d'Angular2 sont principalement combinées avec @Component. La propriété de métadonnées des animations est définie dans le décorateur @Component. Tout comme l'attribut de métadonnées du modèle ! Cela permet à la logique d'animation d'être étroitement intégrée à son code d'application, ce qui rend l'animation plus facile à lancer et à contrôler. Cet article présente principalement l'exemple de code de l'animation de transition de la série angulaire2. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

1. Introduisez dans app.mudule.ts :

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

et ajoutez les importations dans @NgModule :

imports: [BrowserAnimationsModule],

2. Créez une définition de fichier appelée animations.ts pour écrire des animations de transition

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. Sur la page où l'animation de transition doit être ajoutée,

introduisez import {HostBinding } from '@angular/core' (s'il a été introduit, directement ; Ajoutez simplement le HostBinding, ne le présentez plus, vous parlez trop...)

Ensuite, introduisez le modèle d'animation que vous avez écrit : import { slideInDownAnimation } from '../animation' ;

Ajouter @Component : animations :[slideInDownAnimation],

Enfin :

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

L'avez-vous tous appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

Comment utiliser vue-route pour déterminer automatiquement l'animation de transition de rotation de page gauche et droite

Canevas JavaScript vers implémenter une animation de rotation

Un moyen simple de créer un projet angulaire 2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!