在 AngularJS 中同时为多个对象设置动画会产生断断续续的动画

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 状态是“褪色”，而下一张图像中的开始 css 状态也是“褪色”。在这种情况下，您可能需要将 options 对象传递给 addClass(...) 以处理各种 from 和 to css 状态。一些关于如何在$animate 的promise 回调中使用then 的粗略伪代码：

var fadeToNextImg = function() {

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

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

}