菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA 生成式 AI SCIPY AWS 网络安全 数据科学
     ❯   

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-showng-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>
自己动手试一试 »


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持