Question

角度2动画文档很差，所以我开始玩它并决定在2张图像之间制作一些漂亮的动画，如褪色。

我当前的图片都设置了动画触发器：

<img src="myimage.png" class="img img-responsive"
            [@travelState]="travelState"
            >

animations: [
    trigger('travelState', [
      state('inactive', style({

      })),
      state('active',   style({
//Change image src
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]

现在，在非活动状态和活动状态之间切换必须将图像src属性更改为另一个图像，并进行淡入淡出转换。如何在图像触发活动状态时更改src图像属性？

Answer 1

Angular 2动画构建于W3C的CSS3过渡API之上。正如您从list of animatable properties所看到的那样，无法为src属性设置动画。

然而，您可以通过将两个图像叠加在一起来实现基本相同的效果（如果您需要帮助，请参阅here）并为顶部的任何图像设置不透明度的动画。

Answer 2

听起来您想使用将包含在RC.6中的onDone回调

https://github.com/angular/angular/issues/10304

Angular 2 animate - 更改元素属性

2 个答案: