[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属性表示.针对三种参数绑定方式,设定 ...
随机推荐
- 提问:"~"运算符
本人有一段代码关于"~"运算符 public class m{ public static void main(String[] args){ int x=~5; System.o ...
- WCF寄宿方式
WCF开发框架形成之旅---WCF的几种寄宿方式 WCF寄宿方式是一种非常灵活的操作,可以在IIS服务.Windows服务.Winform程序.控制台程序中进行寄宿,从而实现WCF服务的运行,为调用者 ...
- Yii 1.1 DAO绑定参数实例
<?php $sql = "SELECT * FROM admin_user WHERE user_name=:uname AND password LIKE :c"; $c ...
- nova 配置文件
控制节点 /etc/nova/nova.conf [DEFAULT]cpu_allocation_ratio=32.0service_down_time = 7200#use_local = True ...
- javascript —— HTTP头文件详解
HTTP(超文本传输协议:HyperText Transfer Protocol)是浏览器和服务器通过internet进行相互通信的协议,也是网络上应用最为广泛的一种网络协议.HTTP规范由World ...
- C++11变长参数模板
[C++11变长参数模板] C++03只有固定模板参数.C++11 加入新的表示法,允许任意个数.任意类别的模板参数,不必在定义时将参数的个数固定. 实参的个数也可以是 0,所以 tuple<& ...
- nginx配置 首页不显示 index.html首页是显示域名
原状况如下: 访问:www.test.com 敲回车后浏览器中自动跳转致: www.test.com/index.html 公司新需求如下: 访问:www.test.com 敲回车后浏览器中url不变 ...
- JAVA应用apache httpclient探测http服务
代码很简单,apache都已经提供了封装. import org.apache.commons.httpclient.HttpClient; import org.apache.commons.htt ...
- AJAX的工作原理及其优缺点
1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML ...
- 2013-2014集训之DP
第一周: 经过漫长的时间,终于有时间来写一下结题报告. 地址http://acm.hust.edu.cn/vjudge/contest/view.action?cid=36180#overview A ...