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的更多相关文章

  1. AngularJs(Part 9)--AngularJS 表单

    AngularJS 表单     AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...

  2. 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  3. AngularJS概述-3D

    最近工作需要用到,接触的比较多,在此系统学习一下. angular.js 是新一代web MVC开发框架,对应 模型,视图,控制器.,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作do ...

  4. AngularJs学习笔记-AngularJS权威教程学习笔记

    AngularJS是什么? AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS使开发W ...

  5. AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除

    AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...

  6. AngularJS进阶(十)AngularJS改变元素显示状态

    AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...

  7. AngularJS进阶(二)AngularJS路由问题解决

    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...

  8. AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框

    AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...

  9. AngularJS参数绑定 --AngularJS

    AngularJS参数绑定有三种方式.第一种插值表达式“{{}}”表示,第二种在标签中使用ng-bind属性表示,第三种针对input框(标签)的ng-module属性表示.针对三种参数绑定方式,设定 ...

随机推荐

  1. cocos2dx 内存管理的理解

    关于引擎内存管理的细节,网上有大量的详解,这里概括一下: cocos2d-x 的世界是基于 CCObject 类构建的,所以内存管理的本质就是管理一个个 CCObject. //CCObject 内部 ...

  2. spring初探1

    spring初探1 关于新建对象,对象依赖的三种方式比较 场景 某个交易的业务组建拆分,为原先的功能模块新写了一个业务组件 使用new. 修改上层代码的对象生成部分( 如果不是面向接口编程,简直就是灾 ...

  3. 腾讯2015校招一面、二面、HR面

    其实我目前的理想公司就是腾讯. 内推第三面跪了··· 现在校招. 已面完一面.二面.HR面··· 一面主要问我项目和Linux.网络··· 二面主要问我游戏服务器··· 然后是HR面··· 技术面我都 ...

  4. centos6.3 安装配置redis

    1.下载安装 1.1 下载包 注:在http://download.redis.io/releases查询需要下载的版本 wget http://download.redis.io/releases/ ...

  5. R工作空间

    工作空间,指的是你现有的R语言工作环境,它包括了任何一个用户定义的对象,比如:向量,矩阵,数据结构,列表,方法等.在一个R会话结束的时候,你可以保存现有的工作空间的映像,在下一次R启动的时候,该工作空 ...

  6. 转——使用Axure制作App原型应该怎样设置尺寸？

    想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科.这里金乌直接给大家提供一个常用的移动设备尺寸列表, ...

  7. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  8. [转]32位和64位系统区别及int字节数

    一)64位系统和32位有什么区别? 1.64bit CPU拥有更大的寻址能力,最大支持到16GB内存,而32bit只支持4G内存 2.64位CPU一次可提取64位数据,比32位提高了一倍,理论上性能会 ...

  9. jszs 枚举算法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. QueryInterface

    QueryInterface IUnknown *p2; hr = pInnerUnknown->QueryInterface(vGUID2, (void**)&p2); IUnknow ...