[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属性表示.针对三种参数绑定方式,设定 ...
随机推荐
- Java中的路径问题
Java中的路径问题 代码说明,如下: package com.merlin.test; import java.io.InputStream; public class Test { public ...
- mybatis系列-16-spring和mybatis整合
16.1 整合思路 需要spring通过单例方式管理SqlSessionFactory. spring和mybatis整合生成代理对象,使用SqlSessionFactory创建SqlSess ...
- TopFreeTheme精选免费模板【20130619】
今天给大家推荐7款最新精选的WordPress主题和一个WooCommerce订单跟踪插件,如果你有更换自己博客主题的想法或者正要做自己的博客,不妨试试.一些是WordPress商业模板,但都可以免费 ...
- c# 范型Dictionary实用例子
//定义 public static Dictionary<string, object> dict =new Dictionary<string, object>(); // ...
- jquery属性选择器中|value和^value的区别
jquery的属性选择中有两个比较混淆:一个是[attribute^value], 另一个是[attribute|value]. 先看解释: [attribute^value]:选取属性的值以valu ...
- Latex 横排图片
\begin{figure} \begin{minipage}[t]{0.5\linewidth} \centering \includegraphics[width=2.2in]{figure/an ...
- tinyxml2简单使用
引入头文件 <span style="font-size:18px;">#include "HelloWorldScene.h" #include ...
- 【OpenOffice+swftools】在线预览环境的搭建和xpdf中文包的配置
[环境参数] Host:Win7 64bit VMware:VMware Workstation11.1.0 Client OS:CentOS release 6.5 (Final) 2.6.32-4 ...
- NLP初步
[NLP初步] NLP是Natural Lanuage Process的缩写.搜索引擎可以通过关词匹配和完成很多的任务, 比如话题搜索(搜索包含律师, 法院, 控告等词的文档), 但是搜索引擎无法理解 ...
- tomcat 粗略笔记
GlobalNamingResources 存在于server.xml中,定义全局公共数据源,如果host中有大量引用相同的数据源,那么可以都配在这里 <GlobalNamingResource ...