Question

我的目的是将给定的动画应用于html div，有关此动画名称的信息基于角度组件中的Input变量中包含的值：

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  animations: [
    myFirstAnimation(),
    mySecondAnimation(),
    myThirdAnimation(),
  ]
})
export class TestComponent implements OnInit {
  /* 
   * The information about the name of the animation is containded in obj.animation
   * For example: obj.animation may contain '@myFirstAnimation',  '@mySecondAnimation' or '@myThirdAnimation'
   */
  @Input() obj: any;

  //...
}

如何将obj.animation作为div属性插入，以便动态地将动画插入div？

Answer 1

我试图通过使用动画状态从不同的方法解决我的问题。

在我的HTML元素中，我总是引用相同的动画：

<div [@myAnimation]="obj.animation">

其中obj.animation可能包含动画的不同状态（例如：state1，state2，...）。

动画的定义如下：

trigger('myAnimation', [
  transition('void => state1', [
      style({ transform: 'translateX(-100%)', opacity: 0 }),
      animate(300, style({ transform: 'translateX(0)', opacity: 1 }))
    ]
  ),
  transition('void => state2', [
      style({ transform: 'translateX(100%)', opacity: 0 }),
      animate(300, style({ transform: 'translateX(0)', opacity: 1 }))
    ]
  ),
  //...
]);

动态地将动画应用于HTML元素

1 个答案: