AngularJS 动画

在 AngularJS 中，动画是一种非常有用的功能，可以让用户界面更加生动和吸引人。AngularJS 提供了丰富的动画支持，可以通过 CSS 类、JavaScript 代码或者内置的动画指令来实现动画效果。

CSS 类动画

使用 CSS 类来实现动画效果是最简单的方式之一。我们可以定义一些 CSS 类，然后在 HTML 元素上通过 ng-class 指令动态添加或移除这些类来触发动画效果。

// www.javascriptcn.com code example
<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="toggleAnimation()">Toggle Animation</button>
  <div ng-class="{ 'fade-in': animate }">Hello, AngularJS!</div>
</div>

<style>
  .fade-in {
    animation: fadeIn 1s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.animate = false;

    $scope.toggleAnimation = function() {
      $scope.animate = !$scope.animate;
    };
  });
</script>

在上面的示例中，我们定义了一个 CSS 类 .fade-in，当 animate 变量为 true 时，动态添加这个类到 div 元素上，从而触发淡入效果的动画。

JavaScript 动画

除了使用 CSS 类来实现动画效果外，我们还可以通过 JavaScript 代码来实现动画。AngularJS 提供了内置的 $animate 服务，可以让我们在 JavaScript 中控制动画的开始、结束和中间状态。

// www.javascriptcn.com code example
<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="toggleAnimation()">Toggle Animation</button>
  <div ng-show="animate" ng-style="animationStyle">Hello, AngularJS!</div>
</div>

<script>
  var app = angular.module('myApp', ['ngAnimate']);
  app.controller('myCtrl', function($scope, $animate) {
    $scope.animate = false;

    $scope.toggleAnimation = function() {
      $scope.animate = !$scope.animate;
      $scope.animationStyle = {
        opacity: $scope.animate ? 1 : 0,
        transition: 'opacity 1s ease-in-out'
      };
    };
  });
</script>

在上面的示例中，我们使用了 $animate 服务来控制动画效果，通过设置元素的样式来实现淡入淡出的效果。

以上就是关于 AngularJS 动画的简单介绍，希望可以帮助你更好地理解和使用 AngularJS 中的动画功能。