Angular2 라우팅 전환 애니메이션 예시 설명-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2017-12-23 09:17:06

원래의

1996명이 탐색했습니다.

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

1. app.mudule.ts에 도입:

import { BrowserAnimationsModule } from &#39;@angular/platform-browser/animations&#39;;

로그인 후 복사

및 @NgModule에 가져오기 추가:

imports: [BrowserAnimationsModule],

로그인 후 복사

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

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from&#39;@angular/core&#39;;
// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
// 动画触发器名称
trigger(&#39;routeAnimation&#39;, [
  state(&#39;*&#39;,
    style({
      opacity: 1,
      transform: &#39;translateX(0)&#39;
    })
  ),
  transition(&#39;:enter&#39;, [
    style({
      opacity: 0,
      transform: &#39;translateX(-100%)&#39;
    }),
    animate(&#39;0.2s ease-in&#39;)
  ]),
  transition(&#39;:leave&#39;, [
    animate(&#39;0.5s ease-out&#39;, style({
      opacity: 0,
      transform: &#39;translateY(100%)&#39;
    }))
  ])
]);

로그인 후 복사

3. 전환 애니메이션을 추가해야 하는 페이지 작업에서

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

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

Add in @Component: animations:[slideInDownAnimation],

마지막으로:

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

로그인 후 복사

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