AngularJS 动画
AngularJS 在 CSS 的帮助下提供动画过渡。
什么是动画?
动画是指 HTML 元素的变换给你一种运动的错觉。
实例:
选中复选框以隐藏 DIV:
<!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="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><script src="https://cankaoshouce.com/js/angular/angular-animate.js"></script><body ng-app="ngAnimate"><h2>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h2><div ng-hide="myCheck"></div></body></html>
应用程序不应该充满动画，但一些动画可以使应用程序更容易理解。
我需要什么?
要使应用程序为动画做好准备，必须包含 AngularJS 动画库:
<script src="https://cankaoshouce.com/js/angular-animate.js"></script>
然后，您必须在应用程序中引用 ngAnimate 模块:
<body ng-app="ngAnimate">
或者，如果应用程序有名称，则在应用程序模块中添加 ngAnimate 作为依赖项:
实例
<!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="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><script src="https://cankaoshouce.com/js/angular/angular-animate.js"></script><body ng-app="myApp"><h2>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h2><div ng-hide="myCheck"></div><script>var app = angular.module('myApp', ['ngAnimate']);</script></body></html>
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 转换或 CSS 动画来设置 HTML 元素的动画。本教程将向你们展示这两个方面。
如果想学习更多 CSS 动画的内容，可以访问本站的CSS 过渡教程 和 CSS 动画教程.
CSS 过渡
CSS 转换允许您在给定的持续时间内平滑地将 CSS 属性值从一个值更改为另一个值:
实例:
当 DIV 元素获得 .ng-hide 样式，过渡效果将花费 0.5 秒，高度将从 100px 平滑地更改为 0px:
<!DOCTYPE html><html><style>div {transition: all linear 0.5s;background-color: lightblue;height: 100px;}.ng-hide {height: 0;}</style><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><script src="https://cankaoshouce.com/js/angular/angular-animate.js"></script><body ng-app="myApp"><h2>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h2><div ng-hide="myCheck"></div><script>var app = angular.module('myApp', ['ngAnimate']);</script></body></html>
CSS 动画
CSS 动画允许您在给定的持续时间内平滑地将 CSS 属性值从一个值更改为另一个值:
实例:
当 DIV 元素获得 .ng-hide 样式类后，myChange 动画将运行，该动画将平滑地将高度从 100px 更改为 0:
<!DOCTYPE html><html><style>@keyframes myChange {from {height: 100px;} to {height: 0;}}div {height: 100px;background-color: lightblue;}div.ng-hide {animation: 0.5s myChange;}</style><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><script src="https://cankaoshouce.com/js/angular/angular-animate.js"></script><body ng-app="ngAnimate">隐藏 DIV: <input type="checkbox" ng-model="myCheck"><div ng-hide="myCheck"></div></body></html>