[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 ); ...
随机推荐
- Android中不混淆类中函数
情况一:混淆不同的函数aTest.bTest -keep class com.zony.Test { void aTest(byte[], int, int); void bTest(String, ...
- Tour
题意: 给n个点的坐标,求形成的最短的闭合回路. 分析: 经典问题,dp[i][j]表示有1-i点再由j回到1点的最短距离,i点有两种情况,在去的路径上 dp[i][j]=min(dp[i][j],d ...
- 总结：ADO.NET在开发中的部分使用方法和技巧
如何使用 SqlDataAdapter 来检索多个行 以下代码阐明了如何使用 SqlDataAdapter 对象发出可生成 DataSet 或 DataTable 的命令.它从 SQL Server ...
- 【STL】帮你复习STL泛型算法 一
STL泛型算法 #include <iostream> #include <vector> #include <algorithm> #include <it ...
- iBeacon开发
什么是iBeacons iBeacons是苹果在2013年WWDC上推出一项基于蓝牙4.0(Bluetooth LE | BLE | Bluetooth Smart)的精准微定位技术,当你的手持设备靠 ...
- 记：Tmall活动页面开发
一.年轻的我 “无人不成商”,如果一个电子商务网站想要做起来,搞活动时必不可少的(引入流量.提高用户黏度.活跃网站氛围),今天打折,明天送红包. (立秋活动,右) 作为一个前端,我当然要从技术的角度来 ...
- Apache：如何利用.htaccess文件对PHP网站或文件进行伪静态处理
来源:http://www.ido321.com/1123.html 今天get了一招:利用.htaccess文件对PHP网站或文件进行伪静态处理. 一.检查服务器是否支持伪静态处理: 必 须要空间支 ...
- [转]Erlang不能错过的盛宴
Erlang不能错过的盛宴 (快步进入Erlang的世界) 作者:成立涛 (litaocheng@gmail.com) 作为程序员,我们曾经闻听很多“业界动态”,“技术革新”,曾经接触很多“高手箴言” ...
- 搭建Titanium开发环境
轻松制作 App 再也不是梦! Titanium Mobile 让你能够使用你所熟悉的 web 技术,制作出如同使用Objective-C 或 Java 写出的 Native App. 除了有多达三百 ...
- Hibernate关联关系之双向1—n
•双向 1-n 与双向 n-1 是完全相同的两种情形 •双向 1-n 需要在1的一端可以访问n的一端,反之依然. 测试实例代码: 实体类: package com.elgin.hibernate.nt ...