Repeatable animation in angular2

Question

I need to make a repeatable animation when hover a link.

I've made a route link component which contains that 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"; 
  }
}

After hovering the link - it scales as expected but stops when it reaches maximum size. As you can see I used ease-in-out in that animation. What am I missing here ?

UPDATE:

I've created a plunker for this question: https://plnkr.co/edit/e7sN2Aoz2sr68CrWxtgo?p=preview

when I make isHover as boolean --> state doesn't work propely — ohadinho, Feb 10 '17 at 14:36
You want it to animate the size up and down while user is hovering this element? — kind user, Feb 12 '17 at 10:34
@Kinduser exactly ! Scale in and out repeatedly while user is hovering the element — ohadinho, Feb 12 '17 at 10:38
https://plnkr.co/edit/F1DH78GGsI6gdSwpwOZH?p=preview Check it. It can be done easier than using complicated angular animations. — kind user, Feb 12 '17 at 11:02
@ohadinho I've made full answer, you can upvote if you like it. — kind user, Feb 12 '17 at 13:18

score 0 · Accepted Answer · answered Feb 12 '17 at 13:18

0

Simple css animation is enough.

Working plunker.

answered Feb 12 '17 at 13:18

kind user

40,029
7
67
77

Repeatable animation in angular2

1 Answers1