angular - angular2中的可重复动画

Question

悬停链接时，我需要制作可重复的动画。

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

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"; 
  }
}

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

更新：

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

Answer 1

简单css的动画就足够了。

工作笨拙。