[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 ); ...
随机推荐
- Cyborg Genes
题意: 给两个字符串,求最短的以两字符串为子序列的字符串和个数 分析: 最长公共子序列的变形,num[i][j]表示个数 #include <map> #include <set&g ...
- 《Python CookBook2》 第四章 Python技巧 - 若列表中某元素存在则返回之 && 在无须共享引用的条件下创建列表的列表
若列表中某元素存在则返回之 任务: 你有一个列表L,还有一个索引号i,若i是有效索引时,返回L[i],若不是,则返回默认值v 解决方案: 列表支持双向索引,所以i可以为负数 >>> ...
- DataGird导出EXCEL的几个方法
DataGird导出EXCEL的几个方法(WebControl) using System;using System.Data;using System.Text;using System.Web;u ...
- oracle检查点checkpoint信息
1.关于checkpoint的概述 checkpoint是oracle在数据库一致性关闭.实例恢复和oracle基本操作中不可缺少的机制,包含以下相关的含义: A.检查点的位置(checkpoint ...
- trie树 Codeforces Round #367 D Vasiliy's Multiset
// trie树 Codeforces Round #367 D Vasiliy's Multiset // 题意:给一个集合,初始有0,+表示添加元素,-去除元素,?询问集合里面与x异或最大的值 / ...
- struts2框架开发的第一个应用
写这篇博文,主要是帮助那些刚接触struts2框架开发而不知所措的人,希望批评指正 一.先建立一个web project,命名为struts2 二.在webroot/WEB-INF/lib目录下添加如 ...
- NodeJs 开源
iwebpp.io - 运行P2P Node.js web 服务,穿透防火墙,NAT https://github.com/InstantWebP2P/iwebpp.io pm 是一个轻量级的Node ...
- 窥探JVM内存分配和回收的过程
一.环境 JDK 垃圾收集器 是否启用TLAB 通用JVM参数(堆内存分配见下图) 1.6.0_65 Serial + Serial Old 否 -Xms20m -Xmx20m -Xmn10m -XX ...
- Java设计模式系列之观察者模式
观察者模式 Observer的定义 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象. 这个主题对象在状态上发生变化时,会通知所有观察者对象,让它们能够自动更新自己. 第一 ...
- ASP.NET网站中设置404自定义错误页面
在用ASP.NET WebForm开发一个网站时,需要自定义404错误页面. 做法是这样的 在网站根目录下建立了一个404.html的错误页面,然后在Global.asax文件中,加入如下代码: &l ...