src更改上的AngularJS动画图像

一尘不染

src更改上的AngularJS动画图像

angularjs

我有一个AnuglarJS应用，可在其中加载/更改来自Web服务的某些图像…

控制者

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

模板

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

当我的应用程序从Web服务更新时，图像会按预期进行更改，我只想在发生这种情况时进行淡入淡出，该怎么办？

当图像src更改时，是否可以始终进行淡入/淡入？

阅读 217

2020-07-04

共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;
}

2020-07-04