1

我正在尝试在子组件的隐藏元素上触发动画。简单来说，动画应该在元素出现时发生，然后每次用户单击父组件中的按钮时。

这是简单的代码：（试图 plunkr 它，但无法从角核心导入触发组件）

应用程序.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 {

}

我能够在它第一次出现时对其进行动画处理，但是当单击父组件的按钮 #triggerAnimation 时，我无法弄清楚如何再次触发此动画。我搜索了示例，但没有找到任何可以解决我的问题的方法。

谢谢你的帮助

4

1 回答 1

0

您必须切换 showChild 变量。您可以按如下方式更改 setShowChild() 方法 setShowChild() { this.showChild === false ? true : false; }

它检查 this.showChild 是否为假，因此使其为真，否则为假以再次隐藏它。我希望这是你想要得到的结果？

于 2017-04-12T16:31:12.863 回答