AngularJS–Animations(动画)

浏览数：38 / 时间：2015年06月09日

在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>

 

未完待续…

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 java html 使用 问题 log 方法 class style 代码 java html 使用 问题 log 方法

相关文章

随机文章

您可能还喜欢

您可能还喜欢