Question

我正在使用angularJs 1.2+和angular ui路由器我有一个包含div的路线。当进入那条路线时，一个div出现了。我想为那个div添加动画进入和离开，但我不知道该怎么做我不知道我是否应该创建一个使用$ animate的指令或使用angular的内置指令。有什么建议吗？

Answer 1

您需要在CSS中创建动画，并ngAnimate应用并删除相应的类。

或者这是一个很好的Angular Lib，我使用预定义的动画：https://github.com/Hendrixer/ng-Fx

仔细阅读说明，您需要TweenMax.js库。

Answer 2

有一个FAQ：

How to: Animate ui-view with ng-animate

还有相关的example plunker。

如 Developer Guide / Animations 中所述，

它们如何运作：

AngularJS中的动画完全基于CSS类。只要您的网站中的HTML元素附加了CSS类，就可以对其应用动画......

因此，通过这种方式，我们可以创建一些与我们的ui-view元素（在plunker中使用的类或属性）和ngAnimation注入类相关的CSS定义：.ng-enter， .ng-leave ..

与常见问题解答相关的代码段plunker

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
    ...
    transition:all .5s ease-in-out;
    ...
}

[ui-view].ng-enter-active {
  opacity: 1;
  ...
  transform:scale3d(1, 1, 1);
  ...
}

[ui-view].ng-leave {
  opacity: 1; 
  ...
  transform:translate3d(0, 0, 0);
  ...
}

使用angularjs animate动画div

2 个答案:

它们如何运作：