Home > Developer > Web Develop
AngularJS animations and tweenlite make it really easy to create cool 3d effects in your application.
<!DOCTYPE HTML><HTMLNg-app= "Hellogreensock"> <HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>Hello greensock!</title> <Linkrel= "stylesheet"href= "Css/greensock.css"/> </Head> <BodyNg-controller= "Mainctrl"> <questionclass= "Cardwrapper answer-animation"Ng-class= "{' Answer ': showanswer}"ng-repeat= "Q in questions"Ng-mouseenter= "Showanswer = True"Ng-mouseleave= "Showanswer = False"> <Divclass= "card"> <Divclass= "Cardface Front"><imgHeight= "200px"; NG-SRC= "{{q.question}}"/></Div> <Divclass= "Cardface back">><imgHeight= "200px"; NG-SRC= "{{q.answer}}"/></Div> </Div> </question> </Body> <Scriptsrc= "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></Script> <Scriptsrc= "//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></Script> <Scriptsrc= "//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></Script> <Scriptsrc= "Http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></Script> <Scriptsrc= "Js/greensock.3d.js"></Script></HTML>
varApp = 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 () { varController =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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
