Question

在尝试创建幻灯片显示淡入淡出图像时，我遇到了这个问题。我发现，当一次做一个动画时，它们是平滑无缝的。然而，当进行多个动画时，它们会变得不稳定且不稳定。这是我用来淡化一个图像的代码，同时淡出重叠的图像（所有都发生在指令中）：

var fadeToNextImg = function() {
    var nextImg = imageHandler.getNextImage();
    $animate.addClass(curImage, 'ng-hide');
    $animate.removeClass(nextImg, 'ng-hide');
    curImage = nextImg; 
};

这样可行，但动画会产生不稳定的结果。图像不会平滑地淡入淡出，而只是出现，或者有时其中一个图像会褪色。 但是如果我嵌套动画以便一次只发生一个动画，那么两个动画都会完美地完成，一个接着一个，就像这样：

var fadeToNextImg = function() {
    var nextImg = imageHandler.getNextImage();
    $animate.addClass(curImage, 'ng-hide', function() {
        $animate.removeClass(nextImg, 'ng-hide');
        curImage = nextImg;
    });
};

那很好......只是没有我想要的效果。我希望一个图像淡出，而另一个图像无缝淡入其中！难道我做错了什么？或者这是Angular Animate库中的错误/性能问题？

另外需要注意的是，我还在指令之外使用JQuery DOM操作尝试了这个，动画完美无瑕。我只是将它移动到一个指令，因为这是一种有意义的做事方式。那为什么它会增加我的动画呢？

Answer 1

之前没有使用$animate，您看到的主要问题是$animate.addClass(...)会返回“承诺”。一旦完成，表明它是异步的。这意味着只有在前一个promise的回调完成后才能激活每个后续动画（这意味着图像最终被加载）。

换句话说，你拥有它的方式，你的$animate.addClass(..)被立即/连续执行，而不是等待前一个完成，而不是劈开。另外，你拥有它的方式，我不相信ng-hide会起作用。似乎你的最终css状态在一张图片中褪色了＃39;并且下一张图片中的开始css状态被淡化了＃39;太。在这种情况下，您可能需要将options对象传递给addClass(...)以处理各种from和to css状态。关于如何在then承诺回调中使用$animate的粗略伪代码：

var fadeToNextImg = function() {

  var nextImg = imageHandler.getNextImage();
  var promise = $animate.addClass(curImage, 'endfade');

  promise.then(function(results){
    $animate.removeClass(...)
    curImage = nextImg; 
  });

}

在AngularJS中同时动画多个对象会产生不连贯的动画

1 个答案: