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();
}
}
};
});
时间： 2024-12-19 08:08:12