异常教程

AngularJS 动画（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在 Web 开发领域，动画不仅是一种视觉表现形式，更是提升用户体验的重要手段。AngularJS 作为 JavaScript 框架的经典代表，其内置的动画功能让开发者能够通过简单的方式实现优雅的交互效果。本文将从零开始，系统讲解 AngularJS 动画的核心原理、实现方法以及实际应用场景，帮助开发者快速掌握这一技能。无论是刚入门的编程新手，还是希望深入优化应用表现的中级开发者，都能从中找到实用的知识点。

AngularJS 动画的核心机制

AngularJS 动画的核心是通过 指令 和 $animate 服务 实现的。指令是 AngularJS 的核心概念，它允许开发者扩展 HTML 的功能，而 $animate 服务则负责管理动画的生命周期。

比喻理解：指令与动画的关系

可以将指令想象成舞台上的“演员”，而 $animate 服务则是“导演”。当指令执行某些操作（如显示/隐藏元素、添加/删除类名）时，$animate 服务会根据预设的规则“指挥”动画的播放，最终呈现视觉效果。

动画事件的触发条件

AngularJS 动画基于以下四种核心事件：

  • enter：元素被添加到 DOM
  • leave：元素从 DOM 中移除
  • move：元素在 DOM 中的位置发生变化
  • addClass/removeClass：元素的类名被添加或移除

这些事件对应了 AngularJS 内置指令（如 ng-show, ng-hide, ng-repeat）的默认行为。开发者可以通过监听这些事件，为每个阶段绑定自定义动画效果。

AngularJS 动画的实现步骤

以下是实现一个基础动画效果的完整流程：

1. 引入必要的依赖

在项目中需要引入 AngularJS 的动画模块：

angular.module('myApp', ['ngAnimate']);

ngAnimate 是 AngularJS 的官方动画模块，它扩展了 $animate 服务，允许开发者通过 CSS 或 JavaScript 控制动画。

2. 定义动画触发的指令或场景

以 ng-show 指令为例，当元素的 ng-show 表达式值从 false 变为 true 时，会触发 enter 事件；反之则触发 leave 事件。

3. 编写 CSS 或 JavaScript 动画代码

使用 CSS 实现动画（推荐）

AngularJS 会自动为触发事件的元素添加特定的 CSS 类名，例如：

  • .ng-enter：进入动画的初始状态
  • .ng-leave：离开动画的初始状态
  • .ng-move：移动动画的初始状态

开发者只需为这些类名定义过渡效果（transition）或关键帧动画（keyframes），即可实现无缝衔接的动画效果。

示例：为 ng-show 添加淡入淡出效果

.ng-enter {  
  opacity: 0;  
  transition: opacity 0.5s linear;  
}  
.ng-enter-active {  
  opacity: 1;  
}  
.ng-leave {  
  opacity: 1;  
  transition: opacity 0.5s linear;  
}  
.ng-leave-active {  
  opacity: 0;  
}

使用 JavaScript 实现动画（进阶场景）

对于需要复杂逻辑或动态计算的动画，可以使用 $animate 服务的 API 直接操作元素。例如：

angular.module('myApp').run(function($animate) {  
  $animate.enter(element, parent, after).then(function() {  
    console.log('动画完成');  
  });  
});

动画事件与 CSS 类名的映射关系

以下表格总结了 AngularJS 动画事件与 CSS 类名的对应关系，以及它们的触发时机：

动画事件对应 CSS 类名触发条件
enterng-enter, ng-enter-active元素被添加到 DOM 时
leaveng-leave, ng-leave-active元素被移出 DOM 时
moveng-move, ng-move-active元素在 DOM 中的位置改变时
addClassng-animate-add元素的类名被添加时
removeClassng-animate-remove元素的类名被移除时

实战案例：为列表项添加过渡动画

场景描述

假设有一个待办事项列表，当用户点击“添加”按钮时，新任务以滑动动画的形式进入页面；当用户删除任务时，该任务以缩放动画消失。

HTML 结构

<div ng-controller="TodoCtrl">  
  <input type="text" ng-model="newTodo">  
  <button ng-click="addTodo()">添加</button>  
  <ul>  
    <li ng-repeat="todo in todos"  
        ng-class="{active: $index === activeIndex}">  
      {{ todo.text }}  
      <button ng-click="removeTodo($index)">删除</button>  
    </li>  
  </ul>  
</div>

CSS 动画定义

/* 进入动画：从右向左滑入 */  
.ng-enter {  
  transform: translateX(100%);  
  opacity: 0;  
  transition: all 0.3s ease-in-out;  
}  
.ng-enter-active {  
  transform: translateX(0);  
  opacity: 1;  
}  

/* 离开动画：缩放消失 */  
.ng-leave {  
  transform: scale(1);  
  opacity: 1;  
  transition: all 0.3s ease-in-out;  
}  
.ng-leave-active {  
  transform: scale(0.1);  
  opacity: 0;  
}

JavaScript 控制逻辑

angular.module('myApp', ['ngAnimate'])  
  .controller('TodoCtrl', function($scope) {  
    $scope.todos = [];  
    $scope.newTodo = '';  
    $scope.activeIndex = -1;  

    $scope.addTodo = function() {  
      if ($scope.newTodo.trim() !== '') {  
        $scope.todos.push({ text: $scope.newTodo });  
        $scope.newTodo = '';  
      }  
    };  

    $scope.removeTodo = function(index) {  
      $scope.todos.splice(index, 1);  
    };  
  });

效果说明

  • 当新任务被添加时，ng-repeat 触发 enter 事件，元素从右侧滑入。
  • 当任务被删除时，ng-repeat 触发 leave 事件，元素逐渐缩小至消失。

进阶技巧：复杂动画的实现

1. 结合 CSS3 动画

通过 @keyframes 可以实现更复杂的动画效果。例如，为列表项添加旋转动画：

.ng-enter {  
  animation: spin-in 0.5s ease-in-out;  
}  
@keyframes spin-in {  
  0% { transform: rotate(360deg); opacity: 0; }  
  100% { transform: rotate(0); opacity: 1; }  
}

2. 使用 JavaScript 动态控制

对于需要根据数据变化调整动画参数的场景，可以通过 $animate 服务返回的 promise 对象实现：

$animate.enter(element).then(function() {  
  // 动画完成后执行的逻辑  
  console.log('元素已完全进入视图');  
});

3. 优化性能与兼容性

  • 避免过度使用动画：复杂的动画可能影响页面性能，建议仅对关键交互添加动画。
  • 回退方案：为不支持 CSS3 的浏览器提供 fallback，例如： 
    /* 默认过渡效果 */  
.ng-enter {  
  opacity: 0;  
  transition: opacity 0.3s;  
}  
/* 兼容旧版浏览器的 JavaScript 动画 */  
@media screen and (-webkit-min-device-pixel-ratio:0) {  
  /* 特定于 WebKit 的回退方案 */  
}

结论

AngularJS 动画通过模块化的设计和直观的 API，让开发者能够以较低的成本实现高质量的交互效果。无论是简单的淡入淡出，还是复杂的组合动画，开发者只需遵循“定义指令行为 → 编写 CSS/JS 动画 → 测试与优化”的流程，即可快速落地设计需求。

掌握 AngularJS 动画不仅能提升应用的用户体验，更能帮助开发者深入理解框架的底层机制。随着项目复杂度的提升，建议逐步探索更高级的动画库（如 Animate.css）或结合 JavaScript 动画库（如 GSAP）实现更复杂的效果。

通过本文的讲解，希望读者能够建立起从基础到进阶的完整知识体系，并在实际开发中灵活运用 AngularJS 动画，为用户提供更流畅、直观的交互体验。

最新发布

查看更多文章