1.新建html项目，引入jquery；
2.创建div标签，设置id和class属性；
3.新建button按钮，绑定onclick事件；
4.通过id获取对象，使用attr()方法修改class名称；
运用部分讲解：首先，Angular本身不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制，Angular也不提供具体的动画样式，所以说，它的自由度和可定制性挺大的。
那么，刚开始需要在项目的入口html文件中引入Angular框架(angular.js)，然后引入angular.animate.js。
在项目的js入口文件app.js中，新建项目模块，并且添加所依赖的模块ng-Animate(有其他需要的模块的话也可以引入，顺序没关系)
var demoApp = angular.module('demoApp', ['ngAnimate','ui.router'])
这里中间插入一句，建议Angular中的依赖注入用如下模式，在ads、bds或者其他的前端自动化工具打包压缩后不会产生问题，因为仅仅通过 给function传参的形式注入依赖，Angular是会对注入的变量名有严格的要求（如$scope变量名在控制器中注入时变量名只能 写$scope）：
//控制器.js、指令.js、过滤器.js的依赖注入建议都用这种方式写
//这是ui-route的配置，在app.js
demoApp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
// your code.
}])
引入了ngAnimate之后，Angular的动画机制就能生效了。
Angular文档中写到如下指令和支持的动画
Directive
Supported Animations
ngRepeat enter, leave and move
ngView enter and leave
ngInclude enter and leave
ngSwitch enter and leave
ngIf enter and leave
ngClass add and remove
ngShow &ngHide add and remove (the ng-hide class value)
form add and remove (dirty, pristine, valid, invalid &all other validations)
ngModel add and remove (dirty, pristine, valid, invalid &all other validations)
那么，怎么使用呢?
本文拿ng-repeat这个指令来做个介绍，其他的一些指令使用方式几乎相同，可类推。
ng-repeat 主要是对一个list的展示，这些元素是是被创建出来加入到DOM结构中去的，那么，它的动画过程为：
创建元素 ->.ng-enter ->.ng-enter-active ->完成，呈默认状态
默认状态 ->.ng-leave ->.ng-leave-active ->销毁元素
所以可以通过设置.ng-enter(.ng-leave) 和 .ng-enter-active(.ng-leave-active) 的样式，加上css3的动画来显示出动画，如：
<!-- HTML片段 -->
<div ng-init="users = [1,2,3,4,5]"></div>
<input class="filter-btn" type="search" ng-model="u" placeholder="search item" aria-label="search item" />
<ul>
<li class="item" ng-repeat="user in users | filter: u as result">
{{user}}
</li>
</ul>
/* css片断 */
/*ng-repeat的元素*/
.item{
-webkit-transition: all linear 1s
-o-transition: all linear 1s
transition: all linear 1s
}
/*动画开始前*/
.item.ng-enter{
opacity:0
}
/*动画过程*/
.item-ng-enter-active{
opacity:1
}
这样的效果是对所有元素同时应用，可能实际运用中需要有一个先后的渐变出现的效果，这时候可以设置ng-enter-stagger来实现.
/*不同时出现*/
.item.ng-enter-stagger {
transition-delay:0.5s
transition-duration:0
}
同样的，这些angular animate提供的动画的class也可以应用到页面切换中去。如果通过写css的方式还无法满足需求，当然，还可以通过JS的方式来控制动画，下面的代码你可以理解为是一个模版
/* CLASS 是需要应用的class名，handles是支持的操作，如下图所示*/
/* 这里如果是应用在ui-view 的class上，模版会叠加(坑)*/
demoApp.animation('.classname',function(){
return {
'handles':function(element,className,donw){
//... your code here
//回调
return function(cancelled){
// alert(1)
}
}
}
})
