Visual Studio 2017에서 각도 애니메이션이 작동하지 않습니다.

Question

Visual Studio 2017에서 Angular 2를 사용하여 애니메이션을 가져 오는 데 문제가 있습니다. 여기에 누락되었지만 볼 수없는 간단한 것이 있다고 가정합니다. 몇 가지 요소에 애니메이션을 적용하고 버튼의 클릭 이벤트를 사용하여 애니메이션을 테스트하지만 아무 것도 실행되지 않습니다.

내 app.shared.module.ts는;

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 

import { AppComponent } from './components/app/app.component'; 
import { NavMenuComponent } from './components/shared/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { ContactComponent } from './components/shared/contact/contact.component'; 
import { HeroComponent } from './components/shared/hero/hero.component'; 
import { FooterComponent } from './components/shared/footer/footer.component'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     HomeComponent, 
     ContactComponent, 
     HeroComponent, 
     FooterComponent 
    ], 
    imports: [ 
     CommonModule, 
     HttpModule, 
     FormsModule, 
     NoopAnimationsModule, 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ] 
}) 
export class AppModuleShared { 
} 

내 component.html은;

<div class="hero"> 
    <div class="colour-overlay"></div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <h2 [@fadeInAnimation]="state">TEST1</h2> 

      <button (click)="toggleMove()">Click Me!</button> 
     </div> 

     <div class="col-md-6"> 
      <contact></contact> 
     </div> 
    </div> 

</div> 

my component.ts is;

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

@Component({ 
    selector: 'hero', 
    templateUrl: './hero.component.html', 
    styleUrls: ['./hero.component.css'], 
    animations: [fadeInAnimation] 
}) 
export class HeroComponent { 

    state: string; 

    constructor() { 
     this.state = 'inactive'; 
    } 

    toggleMove() { 
     this.state = (this.state === 'inactive' ? 'active' : 'inactive'); 
    } 
} 

그리고 마지막으로 애니메이션은;

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

export const fadeInAnimation = 
    trigger('fadeInAnimation', [ 
     transition('void => *', [ 
      state('active', style({ 
       opacity: 1, 
       transformX: 'transformX(0)' 
      })), 
      state('inactive', style({ 
       opacity: 0, 
       transformX: 'transform(-100%)' 
      })), 
      transition('active => inactive', animate('300ms ease-out')), 
      transition('inactive => active', animate('300ms ease-in')) 
     ]), 

    ]); 

누군가 내가 잘못하고있는 것을 지적 할 수 있습니까?

Answer 1

NoopAnimationsModule을 추가 했으므로 응용 프로그램 전체의 모든 애니메이션이 비활성화됩니다. 귀하는 주 응용 프로그램 모듈 안에 BrowserAnimationsModule을 추가해야한다고 생각합니다.

@NgModule({ 
    declarations: [ 
     ... 
    ], 
    imports: [ 
     CommonModule, 
     HttpModule, 
     FormsModule, 
     // NoopAnimationsModule, //<- remove this 
     BrowserAnimationsModule, //<- add this 
     RouterModule.forRoot([...]) 
    ] 
}) 
export class AppModuleShared { 
}