Question

http://plnkr.co/edit/k9W3AVDJS3spQXuUnHmF

我正在尝试使用$animate库使用animate.css服务进行动画处理，但我似乎无法做到正确。蓝色块有效，因为它使用的是animate.css类，如何使用库中的另一个css类创建$animate.leave。其次，红色块未进入并使用.ng-enter类。任何人都可以解释原因吗？

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-enter { -webkit-animation：fadeInRight 1s; 动画：fadeInRight 1s; } .red.ng-leave { -webkit-animation：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;
}

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

为什么这不是动画？

1 个答案: