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를 사용하여 왼쪽 및 오른쪽 페이지 넘기기 전환 애니메이션을 자동으로 결정하는 방법
위 내용은 Angular2 라우팅 전환 애니메이션 예시 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!