Angular ng-src更改动画 [英] Angular ng-src change animation

问题描述

我已阅读这篇文章，以了解如何为 ng-src 的更改。但是，这似乎不起作用，仅在第一次加载页面时有效。

I've read this post to find out how to animate the change of ng-src. This doesn't seem to work however, only the first time when loading the page.

我想在 ng-src时创建动画更改图片，并提出以下指令：

I want to create an animation when the ng-src of an image changes, and came up with the following directive:

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 更改的正确解决方案应该是什么？

But it doesn't seem to animate. What should be the correct solution to animate the ng-src change?

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

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

推荐答案

一张图片虽然已褪色但在白色背景上。我能够用两个图像将其淡化到先前图像的顶部。

With one image it was fading but on top of white background. I was able to fade it on top of previous image with two images.

通过显示上一个图像并淡化新图像来起作用

It works by showing the prev image and fading the new image

&.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更改动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！