AngularJS 更改 src 上的动画图像 [英] AngularJS animate image on src change

问题描述

我有一个 AnuglarJS 应用程序，我在其中从网络服务加载/更改一些图像...

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

控制器

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

模板

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

当我的应用从网络服务更新时，图像会按预期改变，我只想在发生这种情况时进行淡出/淡入，怎么做?

When my app updates from the webservice the images changes as expected, I just want to make an fadeout / fadein when this happens, how can that be done?

是否可以在图像 src 更改时始终进行淡出/淡入?

Is it possible to always make a fadeout/in when a image src changes?

推荐答案

感谢您的回复 -

我最终这样做了，并且有效;)

I ended up doing this, and it works ;)

--- 指令---

.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 ---

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

这篇关于AngularJS 更改 src 上的动画图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！