Angular ng-src改变动画

Question

我已经阅读了这篇文章,以了解如何动画变化ng-src.但这似乎不起作用,只是第一次加载页面时.

我想在ng-src图像更改时创建动画,并提出以下指令:

myApp.directive("imageChange", function ($timeout) {
    return {
        restrict: "A",
        scope: {},
        link: function (scope, element, attrs) {
            element.on("load", function () {
                $timeout(function () {
                    element.removeClass("ng-hide");
                    element.addClass("ng-show");
                }, 500); // This also is shitty, cause its a fixed value
            });
            attrs.$observe("ngSrc", function () {
                element.removeClass("ng-show");
                element.addClass("ng-hide");
            });
        }
    }
});

但它似乎没有动画.什么应该是动画ng-src变化的正确解决方案？

JSFIDDLE:http://jsfiddle.net/wszk0tr1/3/

Answer 1

有一个图像它褪色但在白色背景上.我能够用两张图片在之前的图像上淡化它.

它的工作原理是显示prev图像并淡化新图像

&.ng-hide-fade{
    opacity: 0;
   transition: 0s all linear;
  -webkit-transition: 0s all linear;
}

&.ng-show{
    opacity: 1;
   transition: 1s all linear;
  -webkit-transition: 1s all linear;
}

在这里工作小提琴 http://jsfiddle.net/bysdntox/gnf384gb/