Angularjs 角度ng src更改动画

我通过阅读了解了如何为

ngsrc

的更改设置动画。然而，这似乎不起作用，只有在第一次加载页面时才起作用

我想在图像的

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

更改动画的正确解决方案应该是什么

---

jshiddle:

有一幅图像正在淡出，但在白色背景上。我能够在前一张图片的基础上用两张图片将其淡入淡出

它的工作原理是显示上一张图像并淡出新图像

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

在这里拉小提琴

---

有一幅图像正在褪色，但背景是白色的。我能够在前一张图片的基础上用两张图片将其淡入淡出

它的工作原理是显示上一张图像并淡出新图像

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

在这里拉小提琴

---

老兄，你又为我节省了两天的调查时间。这一定是个完美的答案。@sudhir真棒的答案！你真是个天才！伙计，你救了我两天的调查。这一定是完美的答案。@sudhir真棒的答案！你真是个天才！