首页 > 代码库 > AngularJS–Animations(动画)
AngularJS–Animations(动画)
在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(动画)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。