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';

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

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

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!