标签：style   blog   http   io   color   ar   使用   java   sp   

在AngularJS 1.3 中，给一些指令(eg:   ngRepeat,ngSwitch, ngView等)提供了一个动画的钩子，也就是说，这些指令可以使用 $animate 动画服务(是一个服务哦，可以注入到controller里面去)。 这些动画钩子可以再整个指令的生命周期中随着各种指示，触发等进行动作，显示动画效果，我们可以使用HTML5的各种动画效果，类似 Transition，Keyframe，或者回调函数(这取决于是否给指令配置了动画)。如果在一个factory工厂方法中，使用AngularJS或者Javascript代码定义，设置了规范的命名空间了的时候，就可以使用动画了（这句话感觉翻译的有问题，忘指点迷津…）。

如果你的应用程序没有依赖于 ngAnimate 模块的话，你的所有动画都是没有用的。

下面我们来看一下一个使用 ngShow 和 ngHide 进行显示隐藏的动画：

<style>
.sample-show-hide {
  padding:10px;
  border:1px solid black;
  background:white;
}

.sample-show-hide {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.sample-show-hide.ng-hide {
  opacity:0;
}
</style>
<div ng-app> 
  <div ng-init="checked=true">
    <label>
      <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
    </label>
    <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
      Visible...
    </div>
  </div>
</div>

因为有动画效果，这里没法显示效果，自己试验吧！

安装动画模块

可以查看动画模块来查看如何安装。

它们是怎么样工作的

在AngularJS中的动画，完全是基于css 样式类的。所以你首先得有这样动画class。我们还是来看看例子吧！

<div ng-repeat="item in items" class="repeated-item">
{{ item.id }}
</div>

未完待续…

AngularJS–Animations(动画)

标签：style   blog   http   io   color   ar   使用   java   sp   

原文地址：http://www.cnblogs.com/leosx/p/4054818.html