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. C语言的 (强制类型转换) 以及 '字符字面值'

    C语言的显式/隐式类型转换,都有一个中间变量的存在,原数据的类型.内容都不变. 以下代码,都用GCC编译. #include<stdio.h> int main() { char c = ...

  2. Ruby相关图书推荐

    Ruby基础教程第4版 作      者 [日] 高桥征义,[日] 后藤裕藏 著:何文斯 译:[日] 松本行弘 校 出 版 社 人民邮电出版社 出版时间 2014-09-01 版      次 4 页 ...

  3. Java正则表达式获取网页所有网址和链接文字

    ;         pos1= urlContent.indexOf(strAreaBegin)+strAreaBegin.length();         pos2=urlContent.inde ...

  4. 定制一个FlatBuffers编译器

    个人并不喜欢FlatBuffers编译器生成的代码,原因是我已经习惯了unix风格的代码. 不喜欢之处大致有以下: 1 命名法使用了Pascal命名法,而我个人习惯了小写字母加下划线式的unix式命名 ...

  5. 关于面试mysql优化的几点纪要

    1.减少查询次数 ,如何减少 ?  2. 表结构优化,如何优化 ? 3. 列选取原则  ? 4.建索引原则   ? 5.mysql语句优化 ?   6.增加mysql处理性能 ? 通过这几点, 再来说 ...

  6. URAL-1997 Those are not the droids you're looking for 二分匹配

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1997 题意:记录了n个人进出门的时间点,每个人在房子里面待的时间要么小于等于a,要么大于 ...

  7. Orion Network Performance Monitor 软件在网络管理中的应用

    Orion Network Performance Monitor 软件在网络管理中的应用       Orion Network Performance Monitor是完全的带宽性能和故障管理软件 ...

  8. [转]前景检测算法--ViBe算法

    原文:http://blog.csdn.net/zouxy09/article/details/9622285 转自:http://blog.csdn.net/app_12062011/article ...

  9. JVM启动参数小结

    一:JVM启动参数共分为三类:         其一是标准参数(-),所有的JVM实现都必须实现这些参数的功能,而且向后兼容:        其二是非标准参数(-X),指的是JVM底层的一些配置参数, ...

  10. input value的值不可改变

    同样是东钿微信服务平台,使用积分的问题,原来的版本是,默认用户不使用积分,也就没有给input赋值,后面华总说默认让用户使用积分,于是我就信誓旦旦把从后台得到用户可使用的积分赋在input上,后来,用 ...