1. 引入 ngAnimate 模块：
确保在你的项目中引入了 AngularJS 和 ngAnimate 模块。你可以通过 CDN 或本地文件引入。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
2. 在应用模块中注入 ngAnimate：
var app = angular.module('myApp', ['ngAnimate']);
3. 使用 ngAnimate 指令：
在 HTML 中，你可以使用 ngAnimate 指令来触发动画效果。以下是一个简单的例子，当按钮被点击时，会添加一个 CSS 类来实现动画效果：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 应用动画</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
<style>
.fade-in-out.ng-enter, .fade-in-out.ng-leave {
transition: opacity 0.5s;
}
.fade-in-out.ng-enter {
opacity: 0;
}
.fade-in-out.ng-enter.ng-enter-active, .fade-in-out.ng-leave {
opacity: 1;
}
</style>
</head>
<body ng-controller="myController">
<button ng-click="toggleFade()">Toggle Fade</button>
<div class="fade-in-out" ng-show="showElement">
This element fades in and out.
</div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('myController', function ($scope) {
$scope.showElement = true;
$scope.toggleFade = function () {
$scope.showElement = !$scope.showElement;
};
});
</script>
</body>
</html>
在上述例子中，使用了 ngAnimate 模块的 ng-show 指令，并配合 CSS 类来定义动画效果。当 ng-show 指令的值发生变化时，ngAnimate 会自动添加相应的 CSS 类（例如，ng-enter、ng-leave），从而触发动画效果。
请注意，这只是一个简单的例子，你可以根据需要使用 ngAnimate 提供的其他指令和类来实现更复杂的动画效果。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4894/Angular