角度2動畫 - 變化元素屬性

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

聽起來像是你要使用的onDone回調將被列入RC.6

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

Answer 2

角2個動畫是建立在W3C的CSS3過渡API之上。正如你可以從他們的list of animatable properties看到的那樣，你的不能動畫src屬性。

但是，通過將兩個圖像彼此疊加（如果您需要幫助，請參閱here），並將最上面的圖像的不透明度設置爲動畫效果，可以獲得基本相同的效果。