Angular2從父組件觸發動畫

Question

我試圖在子組件的隱藏元素上觸發動畫。簡單來說，動畫應該在元素出現時發生，然後每次用戶點擊父組件中的按鈕。

下面是簡單的代碼： （試圖plunkr它，但不可能導入從方芯的觸發器分量）

app.ts

import {ChildComponent} from './child'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <button id="showChildButton" (click)="setShowChild()">Show Child</button> 
    <button id="triggerAnimation">Trigger animation</button> 
    <child-component *ngIf="showChild"></child-component> 
    ` 
    ..... 
}) 
export class App { 

    showChild: boolean = false; 

    setShowChild() { 
    this.showChild = true; 
    } 
} 

child.ts

import { 
    Component, 
    trigger, 
    state, 
    style, 
    transition, 
    animate 
} from '@angular/core' 

@Component({ 
    selector: 'child-component', 
    template: `<h1 [@inflateIn]>Hello</h1>`, 
    animations: [ 
     trigger('inflateIn', [ 
      transition('void => *', [ 
       animate(100, style({ transform: 'scale(1.1)'})) 
      ]), 
      transition('* => *', [ 
       animate(100, style({ transform: 'scale(1.1)'})) 
      ]) 
     ]) 
    ] 
}) 
export class ChildComponent { 

} 

我能夠動畫，第一次出現，b ut我不知道如何再次觸發這個動畫，當點擊父組件的按鈕#triggerAnimation。 我搜索的例子，但我沒有找到任何解決我的情況。

感謝您的幫助

Answer 1

您必須切換showChild變量。您可以更改您的setShowChild（）方法如下 setShowChild() { this.showChild === false ? true : false; }

它檢查this.showChild是否爲false，否則爲false，以便再次隱藏它。 我希望這是你想得到想要的結果？