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动画就足够了。

<强> Working plunker

angular2

1 个答案: