AngularJS animate image on src change

Question

I have an AnuglarJS app, where I load/change some images from a webservice...

Controller

.controller(\'PlayerCtrl\', function($scope, programService         


        

Answer 1

You can't animate an img src change. You can, however, have multiple images and animate their opacity.

HTML/angular template

CSS

.image-container {
    position: relative;
}

.image-container img {
    position: absolute;
    transition: 1s opacity linear;
}

.image-container img.ng-hide {
    display: block!important;
    opacity: 0;
}