[AngularJS] TweenList 3D + AngularJS Animate

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();
      }
    }
  };
});

 

posted @ 2014-11-27 17:27  Zhentiw  阅读(659)  评论(0)  编辑  收藏  举报