angular2中的可重复动画

Question

我需要在悬停 link 时制作一个 可重复的动画 。

我制作了一个包含该动画的路由 link 组件：

import { Component, Input, OnInit, trigger, state, style, transition, animate } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'routelink',
  template: `<a [@hoverState]="isHover" (mouseenter)="mouseEnter()"  (mouseleave)="mouseLeave()" routerLink="{{routerLink}}" routerLinkActive="active">{{title}}</a>`,
  styleUrls: [ 'routelink.component.css' ],
  animations : [
    trigger('hoverState', [
      state('false', style({
        transform: 'scale(1)'
      })),
      state('true',   style({
        transform: 'scale(1.5)'
      })),
      transition('false <=> true', animate('1000ms ease-in-out'))
    ])
  ]
})

export class RouteLinkComponent { 
  @Input()
  title : String;

  @Input()
  routerLink : String;

  isHover : String;

  ngOnInit(): void {
    this.isHover = "false";
  }

  mouseEnter() {
      this.isHover = "true"; 
  }

  mouseLeave() {
      this.isHover = "false"; 
  }
}

悬停 link 后 - 它按预期缩放，但在达到最大尺寸时停止。如您所见，我在该动画中使用了 ease-in-out。我在这里错过了什么？

更新：

我为这个问题创建了一个 plunker： https://plnkr.co/edit/e7sN2Aoz2sr68CrWxtgo?p=preview

Answer 1

简单的css动画就够了。

Working plunker.

angular2中的可重复动画

Repeatable animation in angular2

angular

angular-animations