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. js 判断页面是否加载完成

    javascript代码如下: document.onreadystatechange = subSomething; //当页面加载状态改变的时候执行这个方法 function subSomethi ...

  2. Python filter()删除1-100内素数

    用filter()删除1-100内的素数: #!/usr/bin/env python #coding:utf-8 import math def fil(n): #定义fil函数 flag = 0 ...

  3. STL&quot;源码&quot;剖析-重点知识总结

    STL是C++重要的组件之一,大学时看过<STL源码剖析>这本书,这几天复习了一下,总结出以下LZ认为比较重要的知识点,内容有点略多 :) 1.STL概述 STL提供六大组件,彼此可以组合 ...

  4. 二叉树单色路径最长&amp;&amp;穿珠子

    对树的操作,特别理解递归的好处. //对于一棵由黑白点组成的二叉树,我们需要找到其中最长的单色简单路径,其中简单路径的定义是从树上的某点开始沿树边走不重复的点到树上的 //另一点结束而形成的路径,而路 ...

  5. Java基础 —— JavaScript

    Javascript:基于对象与事件驱动的脚本语言,主要用于客户端 特点: 交互性:信息动态交互. 安全性:不能访问本地硬盘. 跨平台性:只要有浏览器就支持Javascript,与平台无关. Java ...

  6. Java基础 —— CSS

    CSS:层叠样式表(Cascading Style Sheets) --> 提高显示功能,定义样式 html提供了div与span,只为了封装文本数据,div为一行数据,span为行内的数据. ...

  7. windows分屏

    一.准备 主机.显示屏A.显示屏B.DVI连接线2根 二.操作步骤 1.使用DVI连接线将显示屏A连接到主机上,开机进入windows系统(演示用的是win 7)(若已连接,请跳到第2步.基本上这一步 ...

  8. 在VS2013中使用水晶报表

    又遇到了在B/S系统中打印,打印格式要求比较高,打印出的效果要求高大上.用VS2013中微软自带的报表,实在难以实现应用的效果,主要问题表现在: 1.不能插入用Word做好的打印模板,自己按照模板来做 ...

  9. [原创]Devexpress XtraReports 系列 4 创建多栏报表

    昨天我们完成了 [原创]Devexpress XtraReports 系列 3 创建主从报表 今天我们继续学习新的一种报表模式:多栏报表.(Demo源码,数据库最后附上) 或许很多人会问什么是多栏报表 ...

  10. Configure a welcome page in Struts

    Every website need a welcome or default page as an entry point. Here's 3 ways to configure a welcome ...