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

2019独角兽企业重金招聘Python工程师标准>>>

一、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% {-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方法，用于当元素进入、消除时执行动画效果，注意中间无空格。

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

转载于:https://my.oschina.net/u/2445805/blog/497670

angular.js双向数据绑定实现动画特效相关推荐

html5 3d引擎星空,HTML5特效库用three.js实现3d星空动画特效源码
效果图各位长友,大家上午好! 今天给大家带来的是用three.js实现3d星空动画特效源码大家可以按照自己的意愿进行修改,改成自己喜欢的模样! 若是有想文件版源码的可以进HTML5前端技术交流 ...
JS双向数据绑定的原理介绍
1.双向数据绑定的原理:属性拦截 2.属性拦截实现方式 : 使用Object.defineProperty()将对象的属性变成访问器属性. 3.如果对访问器属性不是很了解的小伙伴可以看一下这一篇文章哈 ...
HTML+CSS+JS实现 ❤️夜晚云层动画特效❤️
效果演示: 基于css3 keyframes 属性制作乌云密布云层动画,夜晚云层飘过动画特效.可用于网页动态云层背景特效.利用animation 和png云图片制作完成. 代码目录: 主要代码实现: ...
Angular之双向数据绑定（上）
---恢复内容开始--- angular最初进入前端开发人员视野的时候,给人以不可磨灭的印象之一就是它的双向数据绑定的实现.本篇章会先介绍如何使用此功能,然后在深入解释它的双向绑定的机制是如何实现的. ...
js css3挂历撕掉动画特效
js基于css3属性制作挂历日历本,默认获取当前日期和星期,通过鼠标点击日历本挂历掉落动画特效. 这是古董挂历哈哈哈好久没见过了,喜欢的一定要试哦~ html代码 <div class=&quo ...
10行代码-原生JS双向数据绑定演示
很简单的10行代码就可以实现输入框与页面实时显示的绑定,也就是百度一下一大堆的所谓的双向数据绑定,完全没有必要搞那么长 function test() {const container = docum ...
原生js双向数据绑定
前面我们介绍过存储器属性(重新认识javascript对象(一)--对象及其属性),以及如何用Object.defineProperty()定义一个存储器属性,今天我们介绍如何用Object.defi ...
css波纹波动效果,js+css3催眠波纹动画特效
js代码 function getRandomNumber() { return Math.floor(Math.random() * 255); } function getBrightness(r ...
【Angular】双向数据绑定--作用域树
在某个作用域执行表达式,再刷新(消化) $rootScope.$apply $rootScope.$digest 循环(先序)遍历作用域树,监听器,检查值,刷新创建监听器,监听作用域
HTML+CSS+JS实现燃烧的火焰火花动画特效

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

angular.js双向数据绑定实现动画特效相关推荐

最新文章

热门文章