Animation répétable en angulaire2

Question

Je dois faire une animation répétitive lorsque je survole un lien.

J'ai fait un élément de liaison de la route qui contient cette animation:

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

Après avoir plané le lien - il échelles comme prévu, mais arrête quand il atteint la taille maximale. Comme vous pouvez le voir, j'ai utilisé ease-in-out dans cette animation. Qu'est-ce qui me manque ici?

MISE À JOUR:

J'ai créé un plunker pour cette question: https://plnkr.co/edit/e7sN2Aoz2sr68CrWxtgo?p=preview

Answer 1

simple css animation suffit.

Working plunker.