Question

我正在关注angular docs about animations，方法就是这样：

HTML

<div ngview class="animate">

CSS

.animate.ng-enter{
    ...
}
.animate.ng-leave{
    ...
}

但是在this page之后，同一案例的答案是这样的：

HTML

<div ngview ng-animate="'animate'">

CSS

.animate-enter{
    ...
}
.animate-leave{
    ...
}

我想知道这两种方法的不同之处，关于“最佳实践”，表现和一切......

Answer 1

根据我的理解，您列出的第二页只是ngAnimation到指令的包装器。我甚至不确定这是否是正式的，并且是否保持最新的角度释放（特别是1.2）。

更新：ngAnimate通过yearofmoo页面阅读我发现我认为这回答了你的问题：

＆GT;删除 ngAnimate指令的主要原因之一是   因为难以整合第三方CSS动画   库到您的代码中。一个很好的例子是animate.css   库，使其与ngAnimate一起使用，你必须这样做   将CSS类的组合硬编码到ngAnimate属性中   对于发生的每个事件。这样会更容易   您加载到应用程序中的驱动程序或模块   正在努力。

我认为您应该更关注自己想要编写动画的位置（例如CSS3 vs JS）并采用主流方式。

您可以找到解释不同方法的最新指南on yearofmoo。

您还可以观看egghead.io lessons 48-50

Answer 2

不推荐使用指令ng-animate：最佳做法是通过向元素添加类来完成所有动画，如第一个示例中所示，并链接到Angular文档。 Year of Moo提供了相当全面的指南。

要说的一点是，你仍然可以使用它来使用javascript中定义的自定义动画。有关详细信息，请参阅Year of Moo文章，但它们的开头为：

myApp.animation('.animate',....

这将用于需要支持旧IE（不支持各种CSS转换/动画）的情况，您可能希望使用现有Javascript库的转换，或者您可能有一些非常简单的Javascript仍然应该像动画一样对待的行为（比如，添加一个类几秒钟，然后删除它）。它实际上是一种相当强大的方法，它允许你（ab）使用Javascript来实现视觉细节，但是它使它与任何其他逻辑完全分开。

Answer 3

创建动画，css过渡，关键帧和JS动画有三种方法。每个人都有自己的优点和缺点。你可以阅读这篇好文章，以获得全面的理解。

AngularJS 1.2中的重新制作动画 - yearofmoo.com: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Angularjs ng-animate不同的方法

3 个答案: