javascript - Trigger button animation on event in AngularJS -
i'm trying utilize $animate service in custom directive. i'm running issue $animate service not applying specified class (likely issue $apply's timing), nor first animation finish before $animate removes class.
i want:
mousedown start animation the animation finish the animation 'hold' extended mousedown events the animation end after both finishing animation and mouseup have occurred. in other words never want animation jump. i'd prefer utilize $animate, @ point i'm willing seek other solutions…
please not utilize jquery in solution.
class="snippet-code-js lang-js prettyprint-override">angular.module('app', []) .directive('onactivate', function($parse, $q, $animate, $timeout) { homecoming { restrict: 'a', link: function(scope, element, attr) { var hastouch = false; var handler = $parse(attr.onactivate); element.one('mousedown', function() { if (!hastouch) { console.log('clicked!'); scope.$apply(function() { $animate.addclass(element, 'pressed'); }); element.on('mousedown', function() { scope.$apply(function() { $animate.addclass(element, 'pressed'); }); }); element.on('mouseup', function() { scope.$apply(function() { $animate.removeclass(element, 'pressed'); }); }); element.on('click', function(event) { scope.$evalasync(handler(scope, { $event: event })); }); } }); element.one('touchstart', function(event) { hastouch = true; $animate.addclass(element, 'pressed'); element.on('touchstart', function() { $animate.addclass(element, 'pressed'); }); element.on('touchend touchcancel', function() { $animate.removeclass(element, 'pressed'); }); element.on('touchend', function(event) { scope.$evalasync(handler(scope, { $event: event })); }); }); } } }) class="snippet-code-css lang-css prettyprint-override">/* vendor prefixes handled automatically prefixfree */ @keyframes grow { { transform: scale(1); } { transform: scale(0.75); } } button { width: 5rem; height: 2rem; transition: 1s ease; } button.pressed { transition: none; animation: grow 1s ease; transform: scale(0.75); } button:not(.pressed) { transform: scale(1); } class="snippet-code-html lang-html prettyprint-override"><script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="app"> <button on-activate=""> click me </button> <p style="font-family: sans-serif;">the animation jumps unless user holds button down. want <code>.pressed</code> animation finish regardless of how long users holds button down.</p> </body>
javascript html css angularjs animation
No comments:
Post a Comment