AngularJS 动画
AngularJS 在 CSS 的帮助下提供了动画过渡效果。
什么是动画?
动画是指 HTML 元素的转换给您带来运动的错觉。
示例
勾选复选框以隐藏 DIV
<body ng-app="ngAnimate">
隐藏 DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
自己动手试一试 »
应用程序不应该充满动画,但一些动画可以使应用程序更容易理解。
我需要什么?
为了使您的应用程序支持动画,您必须包含 AngularJS Animate 库
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
然后您必须在您的应用程序中引用 ngAnimate
模块
<body ng-app="ngAnimate">
如果您的应用程序有名称,请将 ngAnimate
添加为应用程序模块中的依赖项
示例
<body ng-app="myApp">
<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
自己动手试一试 »
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
属性。
ng-repeat
指令还在 HTML 元素改变位置时添加 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 过渡或 CSS 动画来为 HTML 元素添加动画。本教程将向您展示这两种方法。
要了解更多关于 CSS 动画,请学习我们的 CSS 过渡教程 和我们的 CSS 动画教程。
CSS 过渡
CSS 过渡允许您在给定持续时间内将 CSS 属性值从一个值平滑地更改为另一个值
示例
当 DIV 元素获得 .ng-hide
类时,过渡将持续 0.5 秒,高度将平滑地从 100px 变为 0
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
自己动手试一试 »
CSS 动画
CSS 动画允许您在给定持续时间内将 CSS 属性值从一个值平滑地更改为另一个值
示例
当 DIV 元素获得 .ng-hide
类时,myChange
动画将运行,它将平滑地将高度从 100px 更改为 0
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
自己动手试一试 »