AngularJS在src上的动画图像发生了变化

Question

我有一个AnuglarJS应用程序,我从web服务加载/更改一些图像...

调节器

.controller('PlayerCtrl', function($scope, programService) {
    ....
    programService.refresh(function(data) {
        $scope.program = data;
    });
    ....

模板

<img src="{{program.image}}" />

当我的应用程序从Web服务更新时,图像会按预期更改,我只想在发生这种情况时制作淡出/淡出,如何才能完成？

当图像src改变时,是否可以始终进行淡出/淡出？

Answer 1

谢谢你的回复 -

我最终这样做了,它的确有效;)

---指令---

.directive('fadeIn', function($timeout){
    return {
        restrict: 'A',
        link: function($scope, $element, attrs){
            $element.addClass("ng-hide-remove");
            $element.on('load', function() {
                $element.addClass("ng-hide-add");
            });
        }
    };
})

---模板---

<img ng-src="{{program.image}}" class="animate-show" fade-in />

--- CSS ---

.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
    transition: all linear 0.5s;
    display: block !important;
}

.animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove {
    opacity: 0;
}

.animate-show.ng-hide-add, .animate-show.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

Answer 2

更新1.5.x -使用Angular 1.5.x,您可以使用ngAnimateSwap来实现此效果.