Angular2 routing transition animation example explanation

The animation system of Angular2 gives the ability to produce various animation effects, and is committed to building animations with the same performance as native CSS animations. Angular2 animations are mainly combined with @Component. The animations metadata property is defined in the @Component decorator. Just like template metadata attributes! This allows the animation logic to be tightly integrated with its application code, making the animation easier to initiate and control. This article mainly introduces the sample code of the transition animation of the angular2 series. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Introduce in app.mudule.ts:

##

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

and add in imports in @NgModule:

imports: [BrowserAnimationsModule],

2. Create a file definition named animations.ts to write transition animation

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. Operate on the page where transition animation needs to be added

Introduce import {HostBinding} from '@angular/core';(If you have introduced it, just add HostBinding directly, Don't introduce it again, you're talking too much...)

Introduce the animation template you wrote: import { slideInDownAnimation } from '../animation';

In @Component Add:animations:[slideInDownAnimation],

Finally:

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

Have you all learned it? Hurry up and give it a try.

Related recommendations:

How to use vue-route to automatically determine the left and right page turning transition animation

JavaScript canvas implements rotation animation

A simple way to build an angular2.0 project

The above is the detailed content of Angular2 routing transition animation example explanation. For more information, please follow other related articles on the PHP Chinese website!