Question

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

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

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 {

}

我能够在第一次出现时为其设置动画，但是当我点击父组件的#triggerAnimation按钮时，我无法弄清楚如何再次触发此动画。我搜索了一些例子，但我找不到任何可以解决我案例的事情。

感谢您的帮助

Answer 1

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

它检查this.showChild是否为false，所以将其设为true，否则为false，以便再次隐藏它。我希望这是你想要的结果吗？

Angular2从父组件触发动画

1 个答案: