javascript - Animations in angular js check if an element is being tweened greenscok -
i wondering there better way this? trying find way can check if animation running on element if dis-regard click command causing animation there no duplicate element showing or repeating animations. here code it's working used factory store animating variable , if variable true won't start new animation.
index.html
<!doctype html> <html lang="en" ng-app="animate"> <head> <meta charset="utf-8" /> <title>js animation</title> <script src="lib/angular/angular.min.js"></script> <script src="lib/angular-animate/angular-animate.min.js"></script> <script src="lib/greensock/src/minified/tweenmax.min.js"></script> <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap-theme.min.css" /> <script src="js/jsanim.js"></script> </head> <body ng-controller="appctrl app"> <div class="container"> <div class="row-fluid"> <div class="jumbotron"> lorem ipsum dolor sit amet, consectetur adipisicing elit. totam natus ipsa libero nisi labore ad pariatur consequatur quasi sint modi porro saepe, cupiditate sed asperiores ullam laudantium sit dolorem. animi. <div class="btn btn-warning" ng-click="app.toggleit()">click toggle</div> </div> </div> <div class="row-fluid"> <div class="col-md-6">lorem ipsum dolor sit amet, consectetur adipisicing elit. numquam, dolore. nam reiciendis consequuntur vero assumenda facere illum non modi vitae in et perferendis labore pariatur, sed, obcaecati nisi dignissimos quae?</div> <div class="col-md-6">lorem ipsum dolor sit amet, consectetur adipisicing elit. numquam, dolore. nam reiciendis consequuntur vero assumenda facere illum non modi vitae in et perferendis labore pariatur, sed, obcaecati nisi dignissimos quae?</div> </div> <div class="row-fluid"> <div class="toggle" ng-if="app.toggle"> toggle </div> </div> </div> </body> </html> here jsanim file.
var app = angular.module("animate", ['nganimate']); app.factory("settings", function(){ var settings = {}; settings.animating = false; return settings; }) app.controller("appctrl", ["$animate", "$scope", "$http", "settings", function appctrl($animate, $scope, $http, settings){ var appctrl = this; appctrl.toggle = true; appctrl.toggleit = function(){ // console.log(settings.animating, "settings.animating"); if(!settings.animating){ appctrl.toggle = !appctrl.toggle; console.log(appctrl.toggle); } } }]) app.animation(".toggle", function(settings){ return { leave:function(element, done){ settings.animating = true; tweenmax.to(element, 1, {opacity:0, oncomplete:done}); return function(ondone){ settings.animating = false; } }, enter:function(element, done){ settings.animating = true; tweenmax.from(element, 1, {opacity:0, oncomplete:done}); return function(ondone){ settings.animating = false; } } } })
there number of ways via tweenmax.
isactive()(as stated earlier @jonathan marzullo) [documentation].tweenmax.gettweensof(),tweenmax.getalltweens()[documentation].tweenmax.istweening()[documention].
so in theory, simple below without having rely on external boolean variable:
if (!tweenmax.istweening(element)) tweenmax.to(element, duration,{prop:value}); hope helps.
Comments
Post a Comment