动画

收藏736

阅读2927

更新时间2025-08-11

什么是动画?

动画是指 HTML 元素的变换给你带来一种运动的错觉。

实例

选中复选框来隐藏 DIV:



隐藏 DIV:

运行实例 »

点击 "运行实例" 按钮查看在线实例

应用程序不应充斥着动画,但一些动画可以使应用程序更易于理解。

我需要什么?

为了让你的应用程序为动画做好准备,您必须包含 AngularJS Animate 库:


然后,你必须在应用程序中引用 ngAnimate 模块:


或者,如果您的应用程序有名称,请将 ngAnimate 添加为应用程序模块中的依赖项:

实例



隐藏 DIV:

运行实例 »

点击 "运行实例" 按钮查看在线实例

ngAnimate 的作用是什么?

ngAnimate 模块添加和删除类。

ngAnimate 模块不会使你的 HTML 元素动画化,但是当 ngAnimate 注意到某些事件(如 HTML 元素的隐藏或显示)时,该元素会获得一些预定义的类,这些类可用于制作动画。

AngularJS 中添加/删除类的指令包括:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-showng-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 平滑过渡到 0:


运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS 动画

CSS 动画允许你在给定的持续时间内,将一个 CSS 属性值平滑地更改为另一个值:

实例

当 DIV 元素获得 .ng-hide 类时,将运行 myChange 动画,该动画将高度从 100px 平滑过渡到 0:


运行实例 »

点击 "运行实例" 按钮查看在线实例

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号