Question

我已阅读this post了解如何为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/

Angular ng-src更改动画

1 个答案: