Angular 5 如何在组件中启动动画（Ionic 3）

Question

我正在使用 Angular 5 和 Ionic 3。我正在尝试在我的项目中使用 Angular 动画。我当前的项目有一个 html 主页面和一个嵌套在其中的 angular 组件。

问题是..我不知道如何从主页按钮触发组件动画。我的主页按钮需要在使用 angular 选择器呈现的组件文本上触发 angular 动画。

这是我的主要 html 文件。

<component1></component1>

<button (click)="startAnimations()">Trigger animation!</button>

和我的主要打字稿文件：

export class AppComponent {
  clickInfo = 'default';
  startAnimations() {
    this.clickInfo = 'clicked';
    setTimeout(() => {
      this.clickInfo = 'default';
    }, 10000);
  }
}

这是我的组件 html 文件，其中包含需要动画的内容。此 div 需要通过单击主 html 中的按钮来设置动画：

<div [@clickedState]="clickInfo"></div>

这是我的动画 ts，它已正确导入到主打字稿文件中。

import { trigger, state, style, transition, animate } from '@angular/animations';


export const clickedStateTrigger = trigger('clickedState', [
    state('default', style({
      backgroundColor: 'orange',
      width: '100px',
      height: '100px',
      margin: '20px',

    })),
    state('clicked', style({
      backgroundColor: 'blue',
      width: '300px',
      height: '500px',
      margin: '20px',

    })),

    transition('default => clicked', animate('200ms 500ms ease-in')),
    transition('clicked => default', animate(300))
  ])

有什么想法吗？或 github 类似的例子？我现在的项目不会在component中触发动画。。我猜主要是因为component不能被主页面的点击功能访问到。

提前致谢，

Answer 1

您正在寻找 @Input()。

添加到 component1:

<component1 [clickInfo]="clickInfo"></component1>

<button (click)="startAnimations()">Trigger animation!</button>

添加到您的 component1.ts 文件：

@Input('clickInfo') clickInfo: string;

了解有关组件交互的更多信息：https://angular.io/guide/component-interaction

了解如何使用带有动画的通用路由器插座：

Angular 5 如何在组件中启动动画（Ionic 3）

Angular 5 How to start animation in a component (Ionic 3)

ionic-framework

ionic3

angular

angular5