angular2中的可重复动画答案

【问题标题】：Repeatable animation in angular2angular2中的可重复动画
【发布时间】：2017-11-23 20:46:36
【问题描述】：

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

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

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

【问题讨论】：

请提供plunker :)
将 isHover 设为布尔值
也缓入缓出分开不在一起
当我将 isHover 设为布尔值时 --> 状态无法正常工作
@Kinduser 我创建了一个 plunker 并更新了我的问题

标签： angular angular-animations

【解决方案1】：

简单的css动画就够了。

Working plunker.

【讨论】：