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

小云云
풀어 주다: 2017-12-23 09:17:06
원래의
1927명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!