[AnuglarJS] TweenMax with ngAnimate】的更多相关文章

Also read: http://www.cnblogs.com/Answer1215/p/3941966.html Using ngAnimate: //!annotate="YourApp" Your AngularJS Module|Replace this or ngModule with the module that you used to define your application. var ngModule = angular.module('YourApp',…
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.idR…
今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览   源码下载 实现的代码. html代码: <html ng-app="app" ng-click="moveblock($event)"> <body> <block class="block">Where Do You Want Me?<br />C…
TweenMax学习整理--特有属性   构造函数:TweenMax(target:Object, duration:Number, vars:Object) target:Object -- 需要缓动的对象 duration:Number -- 缓动持续时间 vars:Object -- 其它参数(特有属性29个,插件17个,公共属性10个,公共方法20个) TweenMax提供的方法大多都会返回一个TweenMax Object实例 [特有属性(29个)] 这29个参数可以直接传入第三个ob…
TweenMax 建立在 TweenLite 和 TweenFilterLite 基础之上,因此,又揉合了这二者的功能,使得功能更加的齐备,但是如果说易用性,觉得还是 TweenLite 来得方便一些.我的译文是从 TweenLite 开始的,接着是 TweenFilterLite 最后是 TweenMax ,这也恰好是这个类发展的轨迹,沿着这个轨迹一路读过来,会觉得容易理解很多. TweenMax 建立在 TweenLite 核心类以及它的大哥 TweenFilterLite 基础之上,它为…
TweenMax 参考http://bbs.9ria.com/thread-214959-1-1.html TweenMax 可能是很多人都用的,包括我 但 是最近发现大量的运用就总会产生这样或那样的"怪事",有时用代码来做缓动有时又用TweenMax造成了代码的 混乱,而且除了单调的TweenMax.to()等几个函数外,貌似还有很多这样那样fun stuffs.对于动画ease的控制,自己除了一个Back就不知道其他了. 总之一片惨淡, 所以趁着这个机会好好总结一下: 一,主要代码…
使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src=&quo…
构造函数:TweenMax(target:Object, duration:Number, vars:Object) target:Object -- 需要缓动的对象 duration:Number -- 缓动持续时间 vars:Object -- 其它参数(特有属性29个,插件17个,公共属性10个,公共方法20个) 下面是关于vars的补充: 其实基本上都是CSS3的一些属性而已:....... (1)x: x轴移动 {x:100} 或者 {x:-100}... (2)y: y轴移动 {y:…
1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-11...step-12 Dependencies(依赖的js库): bower.json { "name": "angular-seed", &…
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Hello Greensock!</title> <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>…