angularjs动画 angularjs动画|AngularJS教程

本文概述

AngularJS动画示例
ngAnimate是做什么的？

在AngularJS中，你可以借助CSS建立动画过渡。 CSS转换了HTML元素，给你一种运动的错觉。
你必须包括以下内容，以使应用程序可以制作动画：
AngularJS Animate库：

< script src=http://www.srcmini.com/” http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js”>< /script>

请参考你应用程序中的ngAnimate模块：

< body ng-app=” ngAnimate” >

AngularJS动画示例

< !DOCTYPE html> < html> < style> div { transition: all linear 0.5s; background-color: lightblue; height: 100px; width: 100%; position: relative; top: 0; left: 0; } .ng-hide { height: 0; width: 0; background-color: transparent; top:-200px; left: 200px; } < /style> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js">< /script> < body ng-app="ngAnimate"> < h1>Hide the DIV: < input type="checkbox" ng-model="myCheck">< /h1> < div ng-hide="myCheck">< /div> < /body> < /html>

ngAnimate是做什么的？ngAnimate模块不会为HTML元素本身设置动画。当ngAnimate注意到某些事件（例如HTML元素的隐藏或显示）时，它仅添加和删除一些预定义的类来制作动画。
【angularjs动画】以下是AngularJS中添加/删除类的指令的列表：