AngularJS入门之动画

动画简介

在AngularJS中，动画可以通过ngAnimate模块来实现。ngAnimate会在带有ng-enter、ng-leave类的元素上绑定CSS3动画，从而实现HTML元素的动态效果。AngularJS中提供了一些预定义的事件，如ngRepeat、ngView、ngInclude的动画事件，当这些事件被触发时，ngAnimate会自动添加相应的ng-enter、ng-leave类。

动画基本使用

在使用ngAnimate之前，需要先将ngAnimate模块添加到应用中。

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

接下来，我们介绍两种常见的动画形式：CSS3动画和JavaScript动画。

CSS3动画

CSS3动画是指使用CSS3的transition、keyframes和transform等属性来实现动画效果。在其中，transition常用于元素的平移、旋转和缩放等效果；keyframes则是用于定义动画的关键帧；transform用于实现元素的变形。

下面是一个简单的使用transition属性实现的动画效果：

<div ng-show="showDiv" class="animate-show">Hello, world!</div>

.animate-show.ng-hide-add {
  animation: 0.5s fadeOut;
}

.animate-show.ng-hide-remove {
  animation: 0.5s fadeIn;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

在这个例子中，我们在展示和隐藏div时添加了对应的ng-show和ng-hide CSS类，这样可以通过CSS3的transition属性实现淡入淡出的效果。

JavaScript动画

有些情况下，CSS3动画无法满足需求，这时我们可以使用JavaScript动画。

在JavaScript动画中，我们需要使用AngularJS提供的$animate服务来实现动画效果。方法如下：

angular.module('myApp').controller('myCtrl', function($scope, $animate) {
  $scope.showDiv = true;

  $scope.toggleDiv = function() {
    $animate.toggleClass(angular.element('#myDiv'), 'animated');
  };
});

<div id="myDiv" ng-class="{ 'animated': state }" ng-click="toggleDiv()">Hello, world!</div>

在这个例子中，我们使用了$animate服务的toggleClass方法，当ng-click事件被触发时，调用该方法来切换CSS类，从而实现元素的缩放效果。

示例说明

示例1：展示和隐藏

下面是一个展示和隐藏效果的示例：

<button ng-click="showDiv = !showDiv">Toggle</button>
<div ng-show="showDiv" class="animate-show">Hello, world!</div>

当点击按钮时，展示和隐藏的效果会使用CSS3的transition属性来实现。

示例2：拖拽效果

下面是一个拖拽效果的示例：

<div id="myDiv" ng-mousedown="mouseDown($event)" ng-mouseup="mouseUp($event)" ng-mousemove="mouseMove($event)" class="animate-drag">Hello, world!</div>

.animate-drag {
    position: absolute;
  cursor: move;
    animation: 0.2s ease-out drag;
}

@keyframes drag {
    from { transform: translate(0, 0); }
    to { transform: translate({{ x }}px, {{ y }}px); }
}

$scope.mouseDown = function($event) {
  $scope.isDragging = true;
  $scope.startX = $event.clientX - parseInt($event.currentTarget.style.left) || 0;
  $scope.startY = $event.clientY - parseInt($event.currentTarget.style.top) || 0;
}

$scope.mouseUp = function($event) {
  $scope.isDragging = false;
}

$scope.mouseMove = function($event) {
  if (!$scope.isDragging) return;

  $scope.x = $event.clientX - $scope.startX;
  $scope.y = $event.clientY - $scope.startY;

  angular.element('#myDiv').css('left', $scope.x + 'px');
  angular.element('#myDiv').css('top', $scope.y + 'px');
}

在这个例子中，我们绑定了ng-mousedown、ng-mouseup和ng-mousemove事件来实现元素的拖拽效果，同时使用了CSS3的animation属性来定义动画效果。

总结

AngularJS中的动画通过ngAnimate模块来实现，通常使用CSS3和JavaScript两种方式。以上是一些动画的基础知识和示例，希望能帮助您更好地理解和运用AngularJS动画。