前两个动画还是传统的css3类加载动画和和<code>css3@keyframes</code>动画，所以比较简单，看我上一篇文章有讲解。
jquery动画，无所谓就是三种形式，通过<code>css（{key：value}）</code>的形式，<code>animate({key:value})</code>的形式和<code>addClass("className")、removeClass("className")</code>三种形式，但是在angular中<code>addClass("className")、removeClass("className")</code>的形式是不行的，只可以通过在<code>animation(element,done)</code>函数中通过传递，<code>function(){}中利用
$(element).css({}) $(element).animate({})</code>并且支持jquery的链式语法，可以创作出很随意的动画
<!DOCTYPE html>
<html lang="en" ng-app="3APP">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<script src="lib/angular-route.js" type="text/javascript"></script>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="lib/bootstrap.js" type="text/javascript"></script>
<script src="lib/angular-animate.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/bootstrap.css" type="text/css"/>
<style>
.ng-bar{
width: 1200px;
height: 50px;
}
/*.animateView.ng-enter,.animateView.ng-leave{
transition: 2s linear all;
-webkit-transition: 2s linear all;
}
.animateView.ng-enter{
width: 1000px;
height: 500px;
border: 1px solid blueviolet;
margin: 0 auto;
}
.animateView.ng-enter-avtive{
width: 1000px;
height: 500px;
border: 1px solid blueviolet;
margin: 0 auto;
font-size: 30px;
}
.animateView.ng-leave{
width: 500px;
height: 200px;
border: 1px solid seagreen;
margin: 0 auto;
font-size: 10px;
}
.animateView.ng-leave{
width: 500px;
height: 200px;
border: 1px solid skyblue;
margin: 0 auto;
font-size: 20px;
}*/
/*@keyframes animateView-enter {
from{opacity: 0;color:red}
to{opacity: 1;color: greenyellow}
}
@-webkit-keyframes animateView-enter {
from{opacity: 0;color: red}
to{opacity: 1;color: greenyellow}
}
@keyframes animateView-leave{
from {opacity:1;color: #0000cc}
to{opacity: 0;color: skyblue}
}
@-webkit-keyframes animateView-leave{
from {opacity:1;color: #0000cc}
to{opacity: 0;color: skyblue}
}
.animateView.ng-enter{
-webkit-animation: 2s animateView-enter;
animation: 2s animateView-enter;
}
.animateView.ng-leave{
-webkit-animation: 2s animateView-leave;
animation: 2s animateView-leave;
}*/
.animateView{
border: 1px solid blue;
width: 200px;
position: relative;
}
</style>
</head>
<body ng-controller="routerController">
<div class="ng-bar">
<ul class="nav nav-tabs">
<li><a href="#/">home</a></li>
<li><a href="#/two">second view</a></li>
<li><a href="#/three">third view</a></li>
</ul>
</div>
<div class="animateView " ng-view>
</div>
</body>
<script>
var app=angular.module('3APP', ['ngAnimate', 'ngRoute']);
app.controller('routerController', function () {
});
app.config(function($routeProvider) {
$routeProvider.when('/', {
template: '<h2>One</h2>'
}).when('/two', {
template: '<h2>Two</h2>'
}).when('/three', {
template: '<h2>Three</h2>'
});
});
app.animation('.animateView', function () {
return {
enter: function (element, done) {
$(element).css({
opacity: 0
});
$(element).animate({
opacity: 1,
left:'220px',
top:'200px',
}, function () {
console.log("done")
}).css({
color:'red',
background:'green'
});
},
leave: function (element, done) {
$(element).animate({
top:'20px',
left:'500px'
}).css({
opacity:'0.5'
});
}
}
})
</script>
</html>
