手册
目录
动画是指 HTML 元素的变换给你带来一种运动的错觉。
选中复选框来隐藏 DIV:
隐藏 DIV:运行实例 »
点击 "运行实例" 按钮查看在线实例
应用程序不应充斥着动画,但一些动画可以使应用程序更易于理解。
为了让你的应用程序为动画做好准备,您必须包含 AngularJS Animate 库:
然后,你必须在应用程序中引用 ngAnimate 模块:
或者,如果您的应用程序有名称,请将 ngAnimate 添加为应用程序模块中的依赖项:
运行实例 »隐藏 DIV:
点击 "运行实例" 按钮查看在线实例
ngAnimate 模块添加和删除类。
ngAnimate 模块不会使你的 HTML 元素动画化,但是当 ngAnimate 注意到某些事件(如 HTML 元素的隐藏或显示)时,该元素会获得一些预定义的类,这些类可用于制作动画。
AngularJS 中添加/删除类的指令包括:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switchng-show 和 ng-hide 指令添加或删除 ng-hide 类值。
其他指令在进入 DOM 时添加 ng-enter 类值,并在从 DOM 中删除时添加 ng-leave 属性。
当 HTML 元素更改位置时,ng-repeat 指令还会添加 ng-move 类值。
此外,在动画过程中,HTML 元素将具有一组类值,动画完成后将删除这些类值。例如:ng-hide 指令将添加这些类值:
ng-animateng-hide-animateng-hide-add(如果要隐藏元素)ng-hide-remove(如果要显示元素)ng-hide-add-active(如果要隐藏元素)ng-hide-remove-active(如果要显示元素)我们可以使用 CSS 过渡或 CSS 动画来为 HTML 元素添加动画效果。本教程将向你展示这两者。
要了解有关 CSS 动画的更多信息,请学习我们的 CSS 过渡教程和 CSS 动画教程。
CSS 过渡允许你在给定的持续时间内,将一个 CSS 属性值平滑地更改为另一个值:
当 DIV 元素获得 .ng-hide 类时,过渡将持续 0.5 秒,高度将从 100px 平滑过渡到 0:
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS 动画允许你在给定的持续时间内,将一个 CSS 属性值平滑地更改为另一个值:
当 DIV 元素获得 .ng-hide 类时,将运行 myChange 动画,该动画将高度从 100px 平滑过渡到 0:
运行实例 »
点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习