您的位置：首页 > Web前端 > JavaScript

angular.js双向数据绑定实现动画特效

2015-08-27 00:00 1241 查看

摘要: angular.js强大的双向数据绑定功能可以方便高效的实现好的动画效果

一、HTML

1、引入必要的js文件，这个不多说了（注意由于之后要使用angular提供的动画效果和路由效果，所以要引入angular-animate.js和angular-route.js两个文件）

2、body内加入以下代码:

<div class="page {{pageClass}}" ng-view></div>

ng-view不多说，class通过双向绑定的方式，通过controller动态控制class中的{{pageclass}}

另外不要忘了使用模块

<html ng-app="bookStoreApp">

二、Javascript

1、app.js文件

这个是入口文件，代码如下：

var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
'bookStoreServices', 'bookStoreDirectives'
]);

bookStoreApp.config(function($routeProvider) {
$routeProvider.when('/hello', {
templateUrl: 'tpls/hello.html',
controller: 'HelloCtrl'
}).when('/list', {
templateUrl: 'tpls/bookList.html',
controller: 'BookListCtrl'
}).otherwise({
redirectTo: '/hello'
})
});

首先定义了bookStoreApp模型模型，并添加依赖。之后通过config设定路由，并设定每个路由对应的控制器。

2、controller.js

用来设定控制器，代码如下：

var bookStoreCtrls = angular.module('bookStoreCtrls', []);
bookStoreCtrls.controller('HelloCtrl', ['$scope',
function($scope) {
$scope.greeting = {
text: 'Hello'
};
$scope.pageClass="hello";
}
]);
bookStoreCtrls.controller('BookListCtrl', ['$scope',
function($scope) {
$scope.pageClass="list";
}
]);

这里就通过不同控制器下对pageClass变量的设定，实现了样式的切换。

三、CSS

.page {
bottom:0;
padding-top:200px;
position:absolute;
text-align:center;
top:0;
width:100%;
}
.page h1 {
font-size:60px;
}
.page a {
margin-top:50px;
}
.hello {
background:#00D0BC;
color:#FFFFFF;
}
.list{
background:#E59400;
color:#FFFFFF;
}
@-webkit-keyframes rotateFall {
0% {
-webkit-transform: rotateZ(0deg);
}
20% {
&nbs
3ff0
p;   -webkit-transform: rotateZ(10deg);
animation-timing-function: ease-out;
}
40% {
-webkit-transform: rotateZ(17deg);
}
60% {
-webkit-transform: rotateZ(16deg);
}
100% {
-webkit-transform: translateY(100%) rotateZ(17deg);
}
}
@-webkit-keyframes slideOutLeft {
to {
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes rotateOutNewspaper {
to {
-webkit-transform: translateZ(-3000px) rotateZ(360deg);
opacity: 0;
}
}
@-webkit-keyframes scaleUp {
from {
opacity: 0.3;
-webkit-transform: scale(0.8);
}
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform:translateX(100%);
}
to {
-webkit-transform: translateX(0);
}
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform:translateY(100%);
}
to {
-webkit-transform: translateY(0);
}
}
.ng-enter {
z-index: 8888;
}
.ng-leave {
z-index: 9999;
}
.hello.ng-enter {
-webkit-animation: scaleUp 0.5s both ease-in;
}
.hello.ng-leave {
-webkit-transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
}
.list.ng-enter {
-webkit-animation:slideInRight 0.5s both ease-in;
}
.list.ng-leave {
-webkit-animation:slideOutLeft 0.5s both ease-in;
}

这里就是基本的CSS3动画定义，没有写其他兼容，这里只针对Chrome。

angular.js提供了ng-enter和ng-leave方法，用于当元素进入、消除时执行动画效果，注意中间无空格。

这样就可以以非常精简的代码实现比较基础的动画效果了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular.js 前端开发 javascript

相关文章推荐

新的分享

章节导航