首页 文章

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

提问于
浏览 次
0

我正在使用Angular 5和Ionic 3.我正在尝试在我的项目上使用Angular动画 . 我当前的项目有一个主html页面和嵌套在里面的角度组件 .

问题是..我不知道如何从主页面按钮触发组件上的动画 . 我的主页面按钮需要在使用角度选择器渲染的组件文本上触发角度动画 .

所以这是我的主要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类似的例子？我当前的项目不会在组件中触发动画 . 我猜这主要是因为主页的点击功能无法访问组件 .

提前致谢，

angular ionic-framework ionic3 angular5

1 回答

  • 0

    你在找 @Input() .

    添加到 component1 ：

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

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

    添加到 component1.ts 文件：

    @Input('clickInfo') clickInfo: string;

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

    了解如何使用带动画的通用路由器插座：Animating routes in angular 4

    回复于

相关问题