在 AngularJS 中，你可以使用 ngAnimate 模块来实现动画效果。ngAnimate 提供了一组指令和服务，用于在 AngularJS 应用中添加和管理动画。以下是一个简单的例子：
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>AngularJS 动画</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-animate.min.js"></script>
  <style>
    /* 定义 CSS 类来应用动画效果 */
    .fade-in-out.ng-enter,
    .fade-in-out.ng-leave {
      transition: opacity 1s;
    }

    .fade-in-out.ng-enter {
      opacity: 0;
    }

    .fade-in-out.ng-enter-active,
    .fade-in-out.ng-leave-active {
      opacity: 1;
    }

    .fade-in-out.ng-leave {
      opacity: 0;
    }
  </style>
</head>

<body ng-controller="myCtrl">

  <h2>AngularJS 动画</h2>

  <!-- 使用 ng-show 来切换元素的可见性，并应用动画效果 -->
  <div class="fade-in-out" ng-show="isVisible">这是一个可以切换可见性的元素。</div>

  <button ng-click="toggleVisibility()">切换可见性</button>

  <script>
    var app = angular.module('myApp', ['ngAnimate']);

    app.controller('myCtrl', function ($scope) {
      $scope.isVisible = true;

      $scope.toggleVisibility = function () {
        $scope.isVisible = !$scope.isVisible;
      };
    });
  </script>

</body>

</html>

在这个例子中，我们使用了 ngAnimate 模块，并在 CSS 中定义了一个简单的淡入淡出动画效果。 ngAnimate 通过添加一些特殊的 CSS 类来管理动画的触发和执行。在这个例子中，我们使用了 ng-enter、ng-leave、ng-enter-active、ng-leave-active 等类。

通过 ng-show 指令，我们可以在点击按钮时切换元素的可见性，并应用定义的动画效果。

请注意，AngularJS 已经进入维护模式，如果你在新项目中使用 Angular，建议使用 Angular 2 及更高版本。 Angular 2+ 有一个名为 Angular Animation 的内置模块，提供了更强大和灵活的动画功能。


转载请注明出处：http://www.pingtaimeng.com/article/detail/4873/Angular