[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 ); ...
随机推荐
- C++ 函数重载与函数匹配
<C++ Primer>笔记,整理关于函数重载与函数匹配的笔记. 函数重载 void func(int a); //原函数 void func(double a); //正确:形参类型不同 ...
- JDBC第一天连接池案例
JDBC,JDBC的工具类JDBC 连接从连接池中拿: 创建连接池的语句: package day01; import java.sql.Connection; import java.sql.Dri ...
- cocos2d-x 详解之 CCLayer（触摸事件）
CCLayer继承自CCNode,在CCLayer中可以实现单点触摸.多点触摸和重力感应回调3种不同形式的交互.这部分的难点在于,当存在多个层都要去接收触摸时它的响应机制是如何处理的.了解内部的处理机 ...
- 重新安装Photoshop CS6以后启动软件出现Licensing for this product has expired
当我们卸载试用版本Photoshop CS6并且重新安装,出现Licensing for this product has expired,并且无法打开软件,这是由于证书过期导致的,解决办法是将计算机 ...
- MorningSale 介绍
MorningSale是一个WEB端的收集门店销售数据,显示销售数据的简单系统,我相信该系统能够有效的提高销售公司在门店销售数据收集 汇总 分析方面的工作效率. 主要功能介绍如下: 1.查看某个店面 ...
- Java内部类this$0字段产生的一个bug
首先查看下面一段代码,我指出了问题代码的所在,读者先自己思考一下这段代码会有什么问题. 这是用clone方法完整拷贝一个二项堆(BinomialHeap)结构的代码.二项堆中包含一个内部类Binomi ...
- web服务器分析与设计（四）
上篇已经开始了系统内部的分析,并且得到一些分析对象.在整个动作场景中,我们得到了一些粗略的对象.有必要对对象进行分析,合并,再抽象. 实质是职责的合理分配,使得系统合乎功能性,同时得到最大的可扩展,可 ...
- Windows服务-手把手带你体验
Microsoft Windows 服务(即,以前的 NT 服务)使您能够创建在它们自己的 Windows 会话中可长时间运行的可执行应用程序.这些服务可以在计算机启动时自动启动,可以暂停和重新启动而 ...
- HDU5734:Acperience（方差）
题意: 给出n个数xi,确定一个值α,使得Σ(xi-α)^2的值最小. 分析: 可以猜想是方差,不懂得可以去方差了解一下. 那么α即为∑(xi)/n,然后要注意的是转化为分数,首先我们不能用小数转分数 ...
- 开元硬件平台 Arduino
开放源代码的电路图设计,程序开发接口免费下载,也可依个人需求自己修改. Arduino不仅仅是全球最流行的开源硬件,也是一个优秀的硬件开发平台,更是硬件开发的趋势.Arduino简单的开发方式使得开发 ...