javascript - 使用 angularjs animate 动画 div

Question

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

Answer 1

有一个常见问题:

• > How to: Animate ui-view with ng-animate

还有相关的example plunker .

如 Developer Guide / Animations 中所述,

它们的工作原理:

Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class attached to a HTML element within your website, you can apply animations to it...

因此，通过这种方式我们可以创建一些与 ui-view 元素相关的 CSS 定义(在 plunker 中使用的类或属性) 和 ngAnimation 注入(inject)类:.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);
  ...
}