6

在尝试创建淡入淡出图像的幻灯片时，我遇到了这个问题。我发现，当一次制作一个动画时，它们是流畅且无缝的。但是，在制作多个动画时，它们会变得不稳定且不稳定。这是我用于淡入一张图像的代码，同时淡出重叠的图像（所有这些都发生在指令中）：

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 操作，并且动画完美无缺。我只是把它移到一个指令中，因为那是有角度的做事方式。那么为什么它会提升我的动画呢？

4

1 回答 1

0

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

换句话说，按照您的方式，您$animate.addClass(..)的 's 会立即/连续执行，并且不要等待前一个完成，因此波动很大。另外，你拥有它的方式，我不相信ng-hide会奏效。似乎您在一个图像中的结束 css 状态是“褪色”，而下一张图像中的开始 css 状态也是“褪色”。在这种情况下，您可能需要将options对象传递addClass(...)给以处理各种 from 和 to css 状态。关于如何then在$animate's promise 回调上使用的一些粗略的伪代码：

var fadeToNextImg = function() {

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

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

}
于 2016-11-16T17:48:11.657 回答