使用するアニメーション角度2

Question

私はAngular 2 Appでアニメーションを使いたいです。 私はすでにapp.module.tsに「BrowserAnimationsModule」をimportet：

import { Component, OnInit } from '@angular/core'; 
import { ViewEncapsulation } from '@angular/core'; 
import { SharedService } from '../shared.service'; 
import { Routes } from '@angular/router'; 
import { Router } from '@angular/router'; 
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations'; 

@Component({ 
    selector: 'app-main-quiz', 
    templateUrl: './main-quiz.component.html', 
    styleUrls: ['./main-quiz.component.css'], 
    encapsulation: ViewEncapsulation.None, 
}) 

export class MainQuizComponent implements OnInit { 

    constructor(private _sharedService: SharedService, private router: Router){ 
    this._sharedService = _sharedService; 
    } 

そして、それはの抜粋です：アニメーションを使用していますcomponent.tsの抜粋がある

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { SharedService } from './shared.service'; 
import { routes } from './app.router'; 
import { AppRoutingModule } from './app-routing.module'; 

import { WinPageComponent } from './win-page/win-page.component'; 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    QuizShowStatusComponent, 
    EntrancePageComponent, 
    NavbarComponent, 
    MainQuizComponent, 
    WinPageComponent, 
    ], 
    exports: [ 
    MainQuizComponent 
    ], 
    imports: [ 
    BrowserModule, 
    routes, 
    AppRoutingModule, 
    BrowserAnimationsModule 

    ], 
    providers: [SharedService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

component.html

<div class="row"> 
      <div class="col-6"> 
      <button type="button" [@answerPanel]='stateButton1' class="btn btn-answer" id="answerButton1" (click)='checkQuestion($event)'>{{currentAnswer1}}</button> 
      </div> 

</div> 

しかし、それは私にエラー

を与えるには、「合成プロパティ@answを発見しましたerPanel。アプリケーション内の「BrowserAnimationsModule」または「NoopAnimationsModule」のいずれかを記載してください「私を助けるため

感謝を

Answer 1

編集：。。。追加の情報を提供するためのおかげで、私はコンポーネントのために設定のアニメーションが表示されないことがあります。 ？（下記の例）あなたのサンプルコードから失わ

@Component(
template: ` // template here`, 
styleUrls: [ // styles here ], 
animations: [ 
    trigger('answerPanel', [ 
     state('inactive', style({ 
     backgroundColor: '#eee', 
     transform: 'scale(1)' 
     })), 
     state('active', style({ 
     backgroundColor: '#cfd8dc', 
     transform: 'scale(1.1)' 
     })), 
     transition('inactive => active', animate('100ms ease-in')), 
     transition('active => inactive', animate('100ms ease-out')) 
    ]) 
    ] 
... 

出典：https://angular.io/guide/animations

---

私はあなたがUPGてきたと仮定していますBrowserAnimationsModuleを使用しているため、Angular 4にレイジングされます。最後の行に注意してください。@angular/coreからのアニメーションのインポートは推奨されておらず、@angular/animationsからインポートする必要があります。

4.0.0-rc1 change logから：

あなたがアニメーションに依存している場合、あなたはまた、アニメーションパッケージ@angular/animationsをインストールして、ルートNgModuleに@angular/platform-browser/animationsから新しいBrowserAnimationsModuleをインポートする必要があります。これがなければ、コードはコンパイルされて実行されますが、アニメーションはアクティブになりません。 @angular/coreからのインポートは推奨されませんでした。新しいパッケージimport { trigger, state, style, transition, animate } from '@angular/animations';からのインポートを使用してください。