[AngularJS] ngAnimate angular way !!
Idea is set up javascript as an api, then just change html to control the behavor.
var app = angular.module("app", ["ngAnimate"]);
app.controller("AppCtrl", function() {
this.isHidden = false;
this.isLarged = false;
this.idReded = false;
this.fadeIt = function(){
this.isHidden = !this.isHidden;
this.idReded = !this.idReded;
this.isLarged = !this.isLarged;
}
});
app.directive('hideMe',function( $animate ){
return function(scope, element, attrs){
scope.$watch(attrs.hideMe, function(newVal){
if(newVal){
$animate.addClass(element, "fade")
}else{
$animate.removeClass(element, "fade")
}
})
}
})
app.directive('redMe',function($animate){
return{
link:function(scope, el, attrs){
scope.$watch(attrs.redMe, function(newVal){
if(newVal){
$animate.addClass(el, "red");
}else{
$animate.removeClass(el, "red");
}
})
}
}
})
app.directive('largeMe',function($animate){
return function(scope, element, attrs){
scope.$watch(attrs.largeMe,function(newVal){
if(newVal){
$animate.addClass(element, "large")
}else{
$animate.removeClass(element, "large")
}
})
}
})
app.animation('.fade',function(){
return{
addClass:function(element, className){
console.log(className);
TweenMax.to(element, 1, {opacity: 0})
},
removeClass:function(element,className){
TweenMax.to(element, 1, {opacity: 1})
}
}
})
app.animation('.large',function(){
return{
addClass:function(element, className){
TweenMax.to(element, 1, {scale: 2})
},
removeClass:function(element,className){
TweenMax.to(element, 1, {scale: 1})
}
}
})
app.animation('.red',function(){
return{
addClass:function(element, className){
TweenMax.to(element, 1, {color: "red"})
},
removeClass:function(element,className){
TweenMax.to(element, 1, {color: "white"})
}
}
})
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Egghead Videos</title>
<link rel="stylesheet" href="./topcoat-desktop-light.min.css">
<link rel="stylesheet" href="./bootstrap-theme.min.css">
<link rel="stylesheet" href="./bootstrap.min.css">
<script type="text/javascript" src="./angular.min.js"></script>
<script type="text/javascript" src="./angular-animate.min.js"></script>
<script type="text/javascript" src="./app.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<button class="btn-primary" ng-click="app.fadeIt()">Click to fade</button>
<hr/>
<button class="badge" hide-me="app.isHidden">Fade me</button>
<button class="badge" hide-me="app.isHidden">Fade me</button> <button class="badge" large-me="app.isLarged">Fade me</button>
<button class="badge" hide-me="app.isHidden">Fade me</button> <button class="badge" hide-me="app.isHidden">Fade me</button>
<button class="badge" red-me="app.idReded">Fade me</button>
</body>
</html>
[AngularJS] ngAnimate angular way !!的更多相关文章
- 升级 AngularJS 至 Angular
Victor Savkin 大神撰写了一系列文章详细介绍如何升级 AngularJS 应用: NgUpgrade in Depth Upgrade Shell Two Approaches to Up ...
- 走进AngularJs(一)angular基本概念的认识与实战
一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...
- 夺命雷公狗—angularjs—25—angular内置的方法（高级）
查看版本信息 angular.version console.log(angular.version); 判断是否相等 angular.equals() var str1 = ''; var str2 ...
- AngularJS(17)-Angular小程序
现在可以开始创建您的第一个 AngularJS 应用程序,一个 AngularJS 单页 Web 应用. <!DOCTYPE html> <html lang="en&qu ...
- 结构-行为-样式-angularJs ngAnimate(Js实现)
声明 页面 Js 注意事项 官方链接 一.声明 注意animate的版本要与Angular的一致. <script src="jquery.1.9.1.min.js"> ...
- AngularJS方法 —— angular.bootstrap
描述: 此方法用于手动加载angularjs模板 (官方翻译:注意基于端到端的测试不能使用此功能来引导手动加载,他们必须使用ngapp. angularjs会检测这个模板是否被浏览器加载或者加载多次并 ...
- 33.AngularJS 应用 angular.module定义应用 angular.controller控制应用
转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Co ...
- AngularJS方法 —— angular.copy
描述: 复制一个对象或者一个数组(好吧,万物皆对象,数组也是一个对象). 如果省略了destination,一个新的对象或数组将会被创建出来: 如果提供了destination,则source对象中的 ...
- AngularJS方法 —— angular.bind
描述: 上下文,函数以及参数动态绑定,返回值为绑定之后的函数. 其中args是可选的动态参数,self在fn中使用this调用. 使用方法: angular.bind(self,fn,args ); ...
随机推荐
- Win7远程登录Ubuntu14.04
Quote: http://www.xp74.com/article/news/6083.htm Method: One:vnc连接,实现图形化登录 优点:图形化操作,较第二种方法快 缺点:效率不是最 ...
- .net高级技术（class0515)
本次课程中讲的有的东西都是根据初学者的认知规律进行了调整,并不是严谨的,比如很多地方在多AppDomain条件下很多说法就不对了,但是说严谨了大家就晕了,因此继续不严谨的讲吧. 很多面试题都在这阶段的 ...
- CSS：7个你可能不认识的单位
原文:7 CSS Units You Might Not Know About 众所周知,当使用CSS技术的时候,很容被一些奇异问题给困住.而当我们面对新的问题时,这会让我们处于非常不利的位置. 但是 ...
- Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...
- SQL Server 跨库连接
-- 开启组件 reconfigure reconfigure -- 关闭组件 reconfigure reconfigure -- 查询远程数据库 SELECT * FROM OPENDATASOU ...
- nova --debug image-list
nova --debug image-list DEBUG (session:) REQ: curl -g -i -X GET http://liberty-aio:35357/v3 -H " ...
- 转】Maven学习总结(三)——使用Maven构建项目
原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4240930.html 感谢! maven作为一个高度自动化构建工具,本身提供了构建项目的功能,下面就来体验一下使 ...
- SaltStack 最新版WebUI部署
saltstack web uiweb平台界面 saltapi项目主页:http://salt-api.readthedocs.org/en/latest/ halite 项目主页:https://g ...
- InnoDB与MyISAM的区别
MyISAM 和 InnoDB 讲解 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级处 ...
- SQL语句执行时所发生的步骤