为什么这个没有动画？

Question

http://plnkr.co/edit/k9W3AVDJS3spQXuUnHmF

我正在尝试使用 $animate 服务和 animate.css 库来制作动画，但我似乎做不好。蓝色块之所以有效，是因为它使用的是 animate.css class，我怎样才能将它与图书馆中的另一个 css class 一起制作成 $animate.leave。其次，红色块没有进入和使用 .ng-enter classes。谁能解释一下为什么？

Answer 1

这个有效：http://plnkr.co/edit/lVijrARDS4Nu9VPSAUl3?p=preview

首先，这就是您的示例不起作用的原因：

蓝框动画是因为它直接使用Animate.css类，根本不使用Angular.js动画管道。
红框没有动画，因为在初始应用程序启动时动画设置为运行。 Angular 阻止动画在初始应用程序设置时达到运行，以防止可能由许多元素同时设置动画引起的性能问题。

您需要进行以下更改才能启用红框动画：

$timeout(fn)

function fn() {
  redBlockElement = angular.element('<div class="red block"></div>')
  $animate.enter(redBlockElement, bodyElement).then(function() {
    $animate.leave(redBlockElement)
  })
}

我只是使用 $timeout 服务来阻止 DOM 进入 0 秒，所以它（技术上）在应用程序启动后运行，所以动画将运行.

但是，您还需要将过渡规则添加到 .ng-enter 本身，而不是添加到正文中，因此我还将此行添加到 CSS 以使动画起作用：

.block.ng-enter {
  transition:0.5s linear all;
  opacity: 0;
}

现在我们可以运行我们的应用程序，但我们还没有将 animate.css 集成到 Angular.js 中。我将动画相关样式更改为：

.red.ng-输入{ -webkit-动画：fadeInRight 1s；动画：fadeInRight 1s； } .red.ng-离开{ -webkit-动画：fadeOutRight 1s；动画：fadeOutRight 1s； }

现在我正在使用 animate.css!

的淡入淡出效果

最后一件事，输入动画有效，但存在无效。在 Angular 1.3.x 中，您需要在动画完成后手动启动摘要循环，否则 UI 更改将不会反映，直到其他内容触发摘要循环。这就是为什么我们需要添加`$rootScope.$apply();

在 Angular 1.4.x 你不需要那样做。

所以最后的JS：

$timeout(myFn);
function myFn() {
  bodyElement = angular.element(document.querySelector('body'))

  redBlockElement = angular.element('<div class="red block"></div>')
  $animate.enter(redBlockElement, bodyElement).then(function() {
    $animate.leave(redBlockElement);
    $rootScope.$apply();
  })
}

最终 CSS:

.red.ng-enter {
  -webkit-animation: fadeInRight 1s;
  animation: fadeInRight 1s;
}
.red.ng-leave {
  -webkit-animation: fadeOutRight 1s;
  animation: fadeOutRight 1s;
}

笨蛋：http://plnkr.co/edit/lVijrARDS4Nu9VPSAUl3?p=preview

为什么这个没有动画？

Why doesn't this animate?

angularjs

ng-animate