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. mybatis系列-15-查询缓存

    15.1     什么是查询缓存 mybatis提供查询缓存,用于减轻数据压力,提高数据库性能. mybaits提供一级缓存,和二级缓存. 一级缓存是SqlSession级别的缓存.在操作数据库时需要 ...

  2. sql统计重复数据

    sql代码如下: 统计重复的数据 select MingCheng from tabShouFeiGongShi group by MingCheng having count(MingCheng) ...

  3. web前端笔试题

    1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母.数字.下划线,总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test ...

  4. hadoop的simple认证

    目前Hadoop的稳定版本为1.2.1,我们的实验就在hadoop-1.2.1上进行 Hadoop 版本:1.2.1 OS 版本: Centos6.4 环境配置 机器名 Ip地址 功能 用户 Hado ...

  5. WebApi参数传递

    c# webapi的参数传递方式:1.查询字符串(query string):2.内容主体(content body) 当然也有cookie或url部分或头部信息(header)等其它传方式,这里仅讨 ...

  6. python异常以及面向对象编程

    一.面向对象 需要注意的是,在Python中,变量名类似__xxx__的,也就是以双下划线开头,并且以双下划线结尾的,是特殊变量,特殊变量是可以直接访问的,不是private变量,所以,不能用__na ...

  7. about云资源共享

      Nosql资源: http://www.aboutyun.com/thread-5655-1-1.html (1)redis安置(2)RedisAdminUI.zip(3)redis安装部署(4) ...

  8. T-SQL 运行时生成语句

    运行时生成语句 1.用EXECUTE执行动态命令 EXECUTE命令可以执行存储过程.函数和动态的字符串命令.注意此语句的作用正如前面在介绍批处理时,如果批中的第一条语句是"EXECUTE存 ...

  9. Html.DropDownListFor

    @Html.DropDownListFor(x => x.WillAttend, new[] { new SelectListItem() {Text = "Yes, I'll be ...

  10. Apache Spark shell的实例操作

    1.scala> val inFile = sc.textFile("./spam.data") 作用是将spam.data当作文本文件加载到Spark中,将spam.dat ...