[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 ); ...
随机推荐
- WIND2003 安装Zend studio 报错
在安装zend stutio是系统报错,貌似是签章检验没有通过,去查了一下网上的解决方式多种多样,经过验证后发现以下可以解决我的问题特做记录 机器配置是E2160+4G 异常信息是:File c:\W ...
- Android引用百度定位API第三方组件后导致其它.so文件无法正常加载的问题
查看当前调试设备CPU架构的方法: adb.exe shell getprop ro.product.cpu.abi (一般返回值为:armeabi-v7a) adb.exe shell getpr ...
- DateTime.IsLeapYear 方法判断是否是闰年，DaysInMonth判断一个月有几天，Addday取得前一天的日期GetYesterDay
一:DateTime.IsLeapYear 方法判断是否是闰年 二:代码 using System; using System.Collections.Generic; using System.Co ...
- memcpy、memmove、memset及strcpy函数实现和理解
memcpy.memmove.memset及strcpy函数实现和理解 关于memcpy memcpy是C和C++ 中的内存拷贝函数,在C中所需的头文件是#include<string.h> ...
- libpomelo的cocos2d-x客户端使用总结
这几天看了libpomelo的cocos2dx客户端这是个聊天室,由2个场景构成,登录场景LoginScene,聊天场景ChatScene. 一. LoginScene 客户端是以Login场景来启动 ...
- public private protected和默认的区别(转自百度)
public private protected和默认的区别 Java中对类以及类中的成员变量和成员方法通过访问控制符(access specifier)进行区分控制.刚学Java语言的同学可能对pu ...
- Tkinter教程之Text(2)篇
本文转载自:http://blog.csdn.net/jcodeer/article/details/1811347 '''Tkinter教程之Text(2)篇''''''6.使用tag来指定文本的属 ...
- NetAdvantage 笔记
1.UltraControlBase Class Members 1.BeginUpdate Method Sets the IsUpdating flag to true which prevent ...
- Codeforces Round #364 (Div.2) C:They Are Everywhere（双指针/尺取法）
题目链接: http://codeforces.com/contest/701/problem/C 题意: 给出一个长度为n的字符串,要我们找出最小的子字符串包含所有的不同字符. 分析: 1.尺取法, ...
- 【转】你真的了解iOS代理设计模式吗？
转自:http://www.cocoachina.com/ios/20160317/15696.html 在项目中我们经常会用到代理的设计模式,这是iOS中一种消息传递的方式,也可以通过这种方式来传递 ...