angularjs - 在AngularJS中同时对多个对象进行动画处理会产生断断续续的动画

在尝试创建幻灯片来淡入和淡出图像时，我遇到了这个问题。我发现，一次制作一个动画时，它们是流畅且无缝的。但是，当执行多个动画时，它们会变得断断续续且不稳定。这是我用于淡入一幅图像，同时淡出重叠图像的代码(所有操作均在指令中进行):

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 的方法。那为什么要增加我的动画效果呢？

最佳答案

以前没有使用过$animate，您看到的主要问题是$animate.addClass(...)一旦完成就返回一个“ promise ”，表明它是异步的。这意味着必须在前一个 promise 的回调完成之后(意味着图像最终已加载)，才必须激活随后的每个动画。

换句话说，您的$animate.addClass(..)会立即/连续执行，而不必等待上一个完成ergo choppiness。另外，按照您的方式，我认为ng-hide不起作用。似乎您在一个图像中的结束CSS状态已“褪色”，而在下一图像中的起始CSS状态也已“褪色”。在这种情况下，您可能需要将options对象传递给addClass(...)来处理各种CSS状态。有关如何在then的promise回调上使用$animate的一些粗略的伪代码:

var fadeToNextImg = function() {

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

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

}

关于angularjs - 在AngularJS中同时对多个对象进行动画处理会产生断断续续的动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24344805/