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，以便再次隐藏它。 我希望这是你想得到想要的结果？