首页 > 代码库 > [AngularJS] TweenList 3D + AngularJS Animate
[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(); } } };});
[AngularJS] TweenList 3D + AngularJS Animate
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。