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. Leetcode: Length of Last Word in python

    Length of Last Word Total Accepted: 47690 Total Submissions: 168587     Given a string s consists of ...

  2. select多个字段赋值给多个变量

    在存储过程中定义了变量v1 int;v2 int;v3 int;从表tab1选择3个字段f1,f2,f3赋值给这三个变量,要如何写 如果单个变量可以  select f1 into v1 from t ...

  3. APT攻击将向云计算平台聚焦

    APT攻击作为一种高效.精确的网络攻击方式,在近几年被频繁用于各种网络攻击事件之中,并迅速成为企业信息安全最大的威胁之一. 近日,飞塔中国首席技术顾问X在谈及APT攻击时表示,随着云计算的不断发展普及 ...

  4. ERROR (ClientException) nova image-list

    nova image-listERROR (ClientException): The server has either erred or is incapable of performi9e-6c ...

  5. T-SQL游标

    游标是面向行的,它会使开发人员变懒,懒得去想用面向集合的查询方式实现某些功能. 在性能上,游标会迟更多的内存,减少可用的并发,占用带宽,锁定资源,当然还有更多的代码量. 用一个比喻来说明为什么游标会占 ...

  6. Spark RDD概念学习系列之RDD的转换（十）

    RDD的转换 Spark会根据用户提交的计算逻辑中的RDD的转换和动作来生成RDD之间的依赖关系,同时这个计算链也就生成了逻辑上的DAG.接下来以“Word Count”为例,详细描述这个DAG生成的 ...

  7. 错误提示:类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内 .

    错误提示:类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内 在做导出数据到EXCEL程序中,出现了错误提示:类型“GridView”的控件“Gr ...

  8. beantool.map2Bean(map,obj)

  9. ASP.NET中Request.ApplicationPath、Request.FilePath、Request.Path、.Request.MapPath、Server.MapPath（转载）

    1.Request.ApplicationPath->当前应用的目录   Jsp中, ApplicationPath指的是当前的application(应用程序)的目录,ASP.NET中也是这个 ...

  10. C#泛型在unity3D中的运用...

    泛型是什么? 这是摘自百度百科中对泛型的介绍: 泛型是c#2.0的一个新增加的特性,它为使用c#语言编写面向对象程序增加了极大的效力和灵活性.不会强行对值类型进行装箱和拆箱,或对引用类型进行向下强制类 ...