애니메이션 : 일부 요소에서만 작동

Question

this 프레임 워크로 생성 된 .NET Core Angular 4 앱을 개발 중입니다. 일부 라우터 애니메이션을 추가하고 내가 수행하는 것보다 this 튜토리얼을 따르고 싶습니다.

일반적으로 작동하는 것처럼 보이지만 애니메이션은 일부 요소에서만 트리거됩니다. I 애니메이션을 포함하는 파일을 추가 한 가이드에 나타낸 바와 같은 방식으로

import { Component } from '@angular/core'; 
import { fadeInAnimation } from '../../animations'; 

@Component({ 
    selector: 'courses', 
    templateUrl: './courses.component.html', 
    animations: [fadeInAnimation], 
    host: { '[@fadeInAnimation]': '' } 
}) 
export class CoursesComponent { 
    public currentCount = 0; 

    public incrementCounter() { 
     this.currentCount++; 
    } 
} 

:

<h1>Courses</h1> 

<p>This is a simple example of an Angular 2 component.</p> 

<p>Current count: <strong>{{ currentCount }}</strong></p> 

<button (click)="incrementCounter()">Increment</button> 

및 컨트롤러 클래스이다 : 예를 들어,이 도면을

import { trigger, state, animate, transition, style } from '@angular/animations'; 

export const fadeInAnimation = 
    trigger('fadeInAnimation', [ 
     // route 'enter' transition 
     transition(':enter', [ 

      // styles at start of transition 
      style({ opacity: 0 }), 

      // animation and styles at end of transition 
      animate('.3s', style({ opacity: 1 })) 
     ]), 
    ]); 

이 코드를 사용하면 오류가 표시되지 않지만 애니메이션은보기의 "증가"버튼 요소에서만 트리거 (및 가시화)됩니다. h1 및 p 요소는 반드시 표시됩니다.

자습서 코드와 다른 유일한 점은 아마도 라우팅 일 것입니다. 내 경로는 다음과 같습니다

<header> 
    <nav-menu></nav-menu> 
</header> 
<main> 
    <div class="container body-content"> 
     <router-outlet></router-outlet> 
    </div> 
</main> 
<footer> 
    <p>&copy; 2017 - CaliUP</p> 
</footer> 

내가 놓친 게 무엇 :

const routes: Routes = [ 
    { 
     path: "", 
     component: ContainerComponent, 
     canActivate: [AuthGuard], 
     children: [ 
      { 
       path: "", 
       redirectTo: "courses", 
       pathMatch: "full" 
      }, 
      { 
       path: "courses", 
       component: CoursesComponent 
       /*resolve: { home: HomeResolver }*/ 
      }, 
      { 
       path: 'subscriptions', 
       component: SubscriptionsComponent, 
       canActivate: [AdminGuard] 
      }, 
      { 
       path: 'registry', 
       component: RegistryComponent, 
       canActivate: [AdminGuard] 
      }, 
      { 
       path: 'settings', 
       component: SettingsComponent, 
       canActivate: [AdminGuard] 
      }, 
      { 
       path: "**", 
       component: PageNotFoundComponent 
      } 
     ] 
    } 
]; 

ContainerComponent은, 지금,이 템플릿 빈 컨트롤러가? 애니메이션이 버튼에서만 작동하고 다른 요소에서는 작동하지 않는 이유는 무엇입니까?

내가 그 정확한 자습서를 시도하고 작업 페이드 아웃 가져 오는 데 실패했습니다 사전 :

Answer 1

에 여러분 모두 감사합니다,하지만 슬라이드 - 인 - 운동을 얻었다. 그러나 페이드 - 인 - 아웃 애니메이션에 대한 작업이있었습니다.

export const fadeInAnimation = 
    trigger('fadeInAnimation', [ 

     state('void', style({ position: 'absolute', width: '100%', height: '100%', opacity: 0 })), 
     state('*', style({ position: 'absolute', width: '100%', height: '100%', opacity: 1 })), 

     transition(':enter', [ 
      style({ transform: 'translateY(20%)', opacity: 0 }), 
      animate('0.8s ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 })) 
     ]), 

     transition(':leave', [ 
      style({ transform: 'translateY(0%)' }), 
      animate('0.8s ease-in-out', style({ transform: 'translateY(-20%)', opacity: 0 })) 
     ]) 

    ]); 

늦은 답변이지만 도움이 되었기를 바랍니다.