在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(...)来处理各种来源和目标 CSS 状态。关于如何在的 Promise 回调then上使用的一些粗略伪代码：$animate

var fadeToNextImg = function() {

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

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

}