[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属性表示.针对三种参数绑定方式,设定 ...
随机推荐
- 2014 IGF 评选（转）
前两天受邀去上海参加今年的独立游戏节评选,准确说是亚洲及太平洋地区的 IGF . 居然有接近 400 个参选游戏是让我事前没有想到的,尤其是在学生组还发现了不少好作品是个惊喜. 评审用了整整两天时间, ...
- STL六大组件之——算法小小小小的解析
参考自侯捷的<stl源码剖析> stl算法主要分为非可变序列算法(指不直接修改其所操作的容器内容的算法),可变序列算法(指可以修改它们所操作的容器内容的算法),排序算法(包括对序列进行排序 ...
- failback 和failover
dubbo 和motan都有在注册中心中都有这个概念 Failover 失效转移通俗地说,即当A无法为客户服务时,系统能够自动地切换,使B能够及时地顶上继续为客户提供服务,且客户感觉不到这个为他提供服 ...
- 干掉cmd：windows下使用linux命令行
对于喜欢用命令行的朋友们,在windows下面使用cmd窗口是不是很不爽?复制不方便?不能随意放大缩小?如果需要多个控制台要多个窗口?....各种不爽 一.基础工具 如果你也不爽,那就对了,所以给大家 ...
- Spark connect to Database
Cannect to Cassandra: 用spark-cassandra-connector, 注意spark,cassandra和connector的版本要配套,Cassandra至少要版本2以 ...
- Android中设置全屏的方法
在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其 ...
- Http状态码的种类及含义
1xx 临时响应:2xx 成功:3xx 重定向: 4xx 请求错误: 5xx 服务器错误: http://www.hostspaces.net/wenzhang-detail.php?id=198 常 ...
- Java学习日志-01-Hello World
1.安装JDK1.7 2.安装eclipse 3.eclipse上写第一个java程序-hello world 先建工程,再建包,养成良好的习惯,然后新建类 若不先建立包,可能会提示"The ...
- html5标签集结1
1.<bdo>标签:覆盖默认的文本方向. <bdo dir="ltr">Here is some text</bdo> 显示结果(从左到右): ...
- 企业部署Linux应用将拥有更低的整体拥有成本
企业部署Linux应用将拥有更低的整体拥有成本 使用Linux能为企业的IT解决方案降低TCO(整体拥有成本Total Cost of The Ownership)吗?在面临这个问题时,很多企 ...