AngularJS 动画
-
什么是动画
动画就是 HTML 元素的转换给您运动的幻觉。AngularJS 在 CSS 的帮助下提供了动画过渡。下面示例演示了选中复选框以隐藏div元素:应用程序不应填充动画,但是某些动画可以使应用程序更易于理解。
-
我需要什么
为了使您的应用程序可以制作动画,您必须包括 AngularJS Animate 库:然后,您必须在应用程序中引用ngAnimate
模块:或者,如果您的应用程序具有名称,则在应用程序模块中添加ngAnimate
作为依赖项: -
ngAnimate 会做什么
ngAnimate
模块添加和删除类。ngAnimate
模块不会为HTML元素设置动画,但是当ngAnimate
注意到某些事件(例如HTML元素的隐藏或显示)时,该元素将获得一些可用于制作动画的预定义类。AngularJS 中添加/删除类的指令是:ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show
和ng-hide
指令添加或删除ng-hide
类值。其他指令在进入 DOM 时会添加ng-enter
类值,而从 DOM 中删除时会添加ng-leave
属性。当 HTML 元素更改位置时,ng-repeat
指令还会添加ng-move
类值。此外,在动画过程中,HTML 元素将具有一组类值,动画完成后将删除它们。 示例:ng-hide
指令将添加以下类值:ng-animate
ng-hide-animate
ng-hide-add
(如果元素将被隐藏)ng-hide-remove
(如果将显示该元素)ng-hide-add-active
(如果该元素将被隐藏)ng-hide-remove-active
(如果将显示该元素)
我们可以使用 CSS过渡 或 CSS动画 为 HTML 元素设置动画。 本教程将向您展示两者。
要了解有关CSS动画的更多信息,请学习我们的 CSS过渡教程 和 CSS动画教程。
-
CSS 过渡
CSS 过渡允许您在给定的时间内将 CSS 属性值从一个值平滑更改为另一个值:下面示例演示了当 div 元素获得.ng-hide
类时,过渡将花费0.5秒,并且高度将从 100px 平滑地变为 0: -
CSS 动画
CSS 动画允许您在给定的时间内将 CSS 属性值从一个值平滑更改为另一个值:下面示例演示了当 div 元素获得.ng-hide
类时,将运行 myChange 动画,它将平滑地将高度从 100px 更改为 0: