[AngularJS] TweenList 3D + AngularJS Animate
AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.
<!DOCTYPE html>
<html ng-app="helloGreensock">
<head lang="en">
<meta charset="UTF-8">
<title>Hello Greensock!</title> <link rel="stylesheet" href="css/greensock.css"/>
</head>
<body ng-controller="MainCtrl">
<question class="cardWrapper answer-animation"
ng-class="{'answer':showAnswer}"
ng-repeat="q in questions"
ng-mouseenter="showAnswer = true"
ng-mouseleave="showAnswer = false">
<div class="card">
<div class="cardFace front"><img height="200px"; ng-src="{{q.question}}"/></div>
<div class="cardFace back">><img height="200px"; ng-src="{{q.answer}}"/></div>
</div>
</question>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script> <script src="js/greensock.3d.js"></script>
</html>
var app = angular.module('helloGreensock', ['ngAnimate']);
app.controller('MainCtrl', function ($scope) {
$scope.questions = [
{question: 'img/1480.jpg', answer: 'img/30.jpg'},
{question: 'img/7081.jpg', answer: 'img/70.jpg'}
];
});
app.directive('question', function () {
var controller = function ($scope) {
$scope.showAnswer = false;
};
return {
restrict: 'E',
scope: true,
controller: controller
}
});
app.animation('.answer-animation', function () {
TweenLite.set('.cardWrapper', {perspective: 400});
TweenLite.set('.card', {transformStyle: 'preserve-3d'});
TweenLite.set('.back', {rotationY: -180});
TweenLite.set(['.back', '.front'], {backfaceVisibility: 'hidden'});
return {
beforeAddClass: function (element, className, done) {
if (className == 'answer') {
TweenLite.to(element.find('.card'), 2,
{rotationY:180, ease:Back.easeOut, onComplete:done});
}
else {
done();
}
},
beforeRemoveClass: function (element, className, done) {
if (className == 'answer') {
TweenLite.to(element.find('.card'), 1.2,
{rotationY:0, ease:Back.easeOut, onComplete:done});
}
else {
done();
}
}
};
});
[AngularJS] TweenList 3D + AngularJS Animate的更多相关文章
- AngularJs(Part 9)--AngularJS 表单
AngularJS 表单 AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...
- 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- AngularJS概述-3D
最近工作需要用到,接触的比较多,在此系统学习一下. angular.js 是新一代web MVC开发框架,对应 模型,视图,控制器.,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作do ...
- AngularJs学习笔记-AngularJS权威教程学习笔记
AngularJS是什么? AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS使开发W ...
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...
- AngularJS进阶(十)AngularJS改变元素显示状态
AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...
- AngularJS进阶(二)AngularJS路由问题解决
AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...
- AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框
AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...
- AngularJS参数绑定 --AngularJS
AngularJS参数绑定有三种方式.第一种插值表达式“{{}}”表示,第二种在标签中使用ng-bind属性表示,第三种针对input框(标签)的ng-module属性表示.针对三种参数绑定方式,设定 ...
随机推荐
- 推荐一款C#反编译软件（开源）
大二的时候老师要求做过一个小项目,大概4个人左右一组.当时交流不是特别到位,项目在一个同学的电脑上建成了就一直在他的电脑上(所以好东西不要烂在你的硬盘里),也不知道什么源码管理,可悲到项目做完我还没有 ...
- 我的日常工具——gdb篇
我的日常工具——gdb篇 03 Apr 2014 1.gdb的原理 熟悉linux的同学面试官会问你用过gdb么?那好用过,知道gdb是怎么工作的么?然后直接傻眼... gdb是怎么接管一个进程?并且 ...
- 看过的bootstrap书籍（附下载地址）
http://yun.baidu.com/share/link?shareid=3820784617&uk=1008683945 以下书籍下载地址. <BootStrap入门教程> ...
- Azure中的分布式1——多实例
Azure中的WebRole和WorkerRole天然支持负载均衡,只需要简单配置一下即可,下面我以一个WebRole为例说明这一点. 创建一个项目类型为MVC4的WebRole 项目结构如下: 右键 ...
- KM算法详解+模板
http://www.cnblogs.com/wenruo/p/5264235.html KM算法用来求二分图最大权完美匹配. 本文配合该博文服用更佳:趣写算法系列之--匈牙利算法 现在有N男N女,男 ...
- cocos2d-x 2.2.5 安卓工程编译的问题
原址:http://www.cocoachina.com/bbs/read.php?tid=217124 新的cocos2d-x 2.2.5 在使用Eclipse的安卓NDK 9 的编译器进行编译的时 ...
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- HD1004Let the Balloon Rise
Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- 解决远程连接mysql错误1130
Mysql远程连接Mysql服务器的数据库,错误代码是1130,ERROR 1130: Host xxx.xxx.xxx.xxx is not allowed to connect to this ...
- EasyUI_tree根据数据库数据生成树形结构JSON格式
@Entitypublic class PubComp { @Id private String aguid; // 菜单ID private String pguid; // 父菜单 private ...