Question

我尝试在我的应用中使用动画，但遗憾的是无济于事。我查看了很多示例，blog，已下载animate.css等等。

我注入了动画模块，尝试了基本的例子，尝试跟随tutorials，但似乎我每次都想念。

有人可以为AngularJS v1.2动画提供准确的说明，包括注射，包含以及让它们工作所需的一切吗？也许是关于你通常如何制作动画的分步说明。

ng-show / hide上的基本fadein / fadeout示例就足够了。

非常感谢

Answer 1

参考angular-animate.js

将ngAnimate添加为依赖模块：

myApp = angular.module('myApp', ['ngAnimate']);

使用ng-show指令为视图添加div，例如两个类'fadein'和'fadeout'：
```
<div class="fadein fadeout" ng-show="show">I am the div.</div>
```

将类添加到css中。在1.2 ngAnimate是基于类的，您需要根据特定的命名约定为您的类添加某些后缀。有关此信息的良好信息来源可以找到here。

示例：

/* Fade in ngShow */
.fadein.ng-hide-remove {
  -webkit-transition: 1s;
  transition: 1s;   
  display: block !important;     
  opacity: 0;
}

.fadein.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}


/* Fade out ngShow */
.fadeout.ng-hide-add {
  -webkit-transition: 1s;
  transition: 1s;     
  display: block !important;    
  opacity: 1;
}

.fadeout.ng-hide-add.ng-hide-add-active {
  opacity: 0;
}

添加逻辑以更改提供给ng-show指令的表达式，div应淡入和淡出。

一个工作示例：http://plnkr.co/edit/lq4LmUq5mrbJBGMMEyh9?p=preview

AngularJS 1.2中的动画 - 如何

1 个答案: