AngularJS 动画

AngularJS 提供了一种强大的动画支持，通过与 ngAnimate 模块结合使用，你可以在应用中轻松地添加动态过渡和效果。AngularJS 动画使得页面元素能够在视图变化时平滑过渡，如添加、删除、修改元素时的动画效果。这不仅能提升用户体验，也能使应用看起来更加现代和流畅。

1. 引入 ngAnimate 模块

要使用 AngularJS 动画，首先需要确保你已经引入了 ngAnimate 模块和相关的 CSS 库。

<!-- 引入 AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<!-- 引入 ngAnimate 模块 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-animate.min.js"></script>

<!-- 引入动画样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-csp.css">

2. 启用 ngAnimate

在你的 AngularJS 应用中，你需要启用 ngAnimate 模块：

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

3. 动画过渡：基本用法

AngularJS 提供了多种动画过渡效果，例如，元素的进入、离开、类添加和删除时的动画。

3.1 使用 `ng-show` 和 `ng-hide`

ng-show 和 ng-hide 控制元素的显示和隐藏，并支持过渡动画效果。

<div ng-app="myApp" ng-controller="mainController">
    <button ng-click="toggle()">点击切换显示</button>

    <div class="box" ng-show="isVisible">
        显示的内容
    </div>
</div>

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

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

    $scope.toggle = function() {
        $scope.isVisible = !$scope.isVisible;
    };
});

CSS 动画：

.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    transition: opacity 0.5s ease;
}

.box.ng-hide {
    opacity: 0;
}

ng-show 会将元素的 display 属性从 none 变为 block，并触发动画。
ng-hide 会将元素的 display 属性从 block 变为 none，并触发动画。

3.2 使用 `ng-if` 和 `ng-animate`

ng-if 可以根据条件来添加或删除 DOM 元素，而 ngAnimate 允许你为元素的进入、离开添加动画。

<div ng-app="myApp" ng-controller="mainController">
    <button ng-click="addItem()">添加项</button>

    <div ng-repeat="item in items" ng-if="item.visible" class="fade-item">
        {{ item.name }}
    </div>
</div>

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

app.controller('mainController', function($scope) {
    $scope.items = [];

    $scope.addItem = function() {
        var newItem = { name: '新项 ' + ($scope.items.length + 1), visible: true };
        $scope.items.push(newItem);
    };
});

CSS 动画：

.fade-item {
    background-color: lightgreen;
    padding: 10px;
    margin: 5px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.fade-item.ng-enter {
    opacity: 1;
}

.fade-item.ng-leave {
    opacity: 0;
}

ng-enter：元素进入时的动画。
ng-leave：元素离开时的动画。

3.3 动画过渡：增加、删除元素

在添加和删除元素时，你可以使用 ng-enter 和 ng-leave 动画类。

<div ng-app="myApp" ng-controller="mainController">
    <button ng-click="addItem()">添加项</button>
    <button ng-click="removeItem()">移除项</button>

    <ul>
        <li ng-repeat="item in items" ng-animate="enterLeave">{{ item }}</li>
    </ul>
</div>

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

app.controller('mainController', function($scope) {
    $scope.items = [];

    $scope.addItem = function() {
        $scope.items.push("项 " + ($scope.items.length + 1));
    };

    $scope.removeItem = function() {
        $scope.items.pop();
    };
});

CSS 动画：

li.ng-enter {
    animation: slideIn 0.5s forwards;
}

li.ng-leave {
    animation: slideOut 0.5s forwards;
}

@keyframes slideIn {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(50px);
        opacity: 0;
    }
}

使用 @keyframes 定义自定义动画效果，应用到进入和离开时的动画。

4. 动画钩子

AngularJS 允许你自定义动画效果的钩子函数，提供了更多的控制。你可以在 ng-animate 上注册不同的钩子来控制元素的动画流程。

4.1 `ng-enter`、`ng-leave` 和 `ng-move`

ng-enter: 元素进入 DOM 时触发。
ng-leave: 元素从 DOM 中移除时触发。
ng-move: 当元素在 DOM 中移动时触发。

.ng-enter {
    transition: all 1s ease;
    opacity: 0;
}

.ng-enter-active {
    opacity: 1;
}

.ng-leave {
    transition: all 1s ease;
    opacity: 1;
}

.ng-leave-active {
    opacity: 0;
}

5. 总结

AngularJS 动画 基于 ngAnimate 模块，通过 CSS 过渡和动画支持视图的平滑过渡。
使用 ng-show、ng-hide、ng-if、ng-repeat 等指令，结合自定义 CSS 动画类，可以为元素的显示、隐藏、添加和删除等操作添加动态效果。
你可以使用 ng-enter、ng-leave、ng-move 等动画钩子来实现更细粒度的动画控制。

AngularJS 动画的核心优势是通过指令和 CSS 类提供了灵活的动画效果控制，使开发者能够快速而简单地为应用程序增加动态交互。

AngularJS 动画