angularjs - 在 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 操作，并且动画完美无缺。我只是将其移至指令，因为这是做事的 Angular 方式。那么为什么它会提升我的动画效果呢？

Answer 1

之前没有使用过 $animate，您看到的主要问题是 $animate.addClass(...) 一旦使用就会返回一个“promise”完成，表明它是异步的。这意味着只有在前一个 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; 
  });

}