Angular2 라우팅 전환 애니메이션 예시 설명

Angular2의 애니메이션 시스템은 다양한 애니메이션 효과를 생성할 수 있는 기능을 제공하며, 기본 CSS 애니메이션과 동일한 성능의 애니메이션을 구축하는 데 주력하고 있으며, 주로 @Component와 결합됩니다. 애니메이션 메타데이터 속성은 @Component 데코레이터에 정의됩니다. 템플릿 메타데이터 속성과 같습니다! 이를 통해 애니메이션 로직이 애플리케이션 코드와 긴밀하게 통합되어 애니메이션을 더 쉽게 시작하고 제어할 수 있습니다. 이번 글에서는 주로Angular2 시리즈의 전환 애니메이션 샘플 코드를 소개하고 있는데, 편집자께서 꽤 괜찮다고 하셔서 지금부터 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. app.mudule.ts에 도입:

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

및 @NgModule에 가져오기 추가:

imports: [BrowserAnimationsModule],

2. 전환 애니메이션 작성을 위해 animations.ts라는 파일 정의 생성

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. 전환 애니메이션을 추가해야 하는 페이지 작업에서

'@angular/core'에서 import {HostBinding }을 도입합니다. (도입했다면 HostBinding을 직접 추가하세요. 다시 소개하자면 말이 너무 많네요...)

당신이 작성한 애니메이션 템플릿을 소개하세요: import { SlideInDownAnimation } from '../animation';

Add in @Component: animations:[slideInDownAnimation],

마지막으로:

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

다들 배우셨나요? 서둘러서 사용해 보세요.

관련 권장 사항:

vue-route를 사용하여 왼쪽 및 오른쪽 페이지 넘기기 전환 애니메이션을 자동으로 결정하는 방법

JavaScript 캔버스로 회전 애니메이션 구현

Angular2.0 프로젝트를 구축하는 간단한 방법

위 내용은 Angular2 라우팅 전환 애니메이션 예시 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!