StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAngularjs: animation service
text
Body
copied!<p>First off I am using ng-boilerplate, so my dependencies have been declared in my controller.</p> <p>My directive in HTML is as follows:</p> <pre><code><div div-float="logo.left" class="letterhead-widget" id="logo"> </code></pre> <p>I set the value of logo.left to either 'left' or 'false' depending on a ng-click. With the scope.$watch I check the change in the iAttrs.divFloat, whether it's set to 'left' or false. I can log out the newVal when == 'left' Here is where the problem lies as the $animate.addClass(element, 'logoLeft); is not firing and cannot log either 'add' or 'remove'.</p> <p>Any ideas why my addClass or removeClass is not working for me? I can validate that the .logoLeft is being added and removed, but I take it that's not through the $animation</p> <pre><code>angular.module('floats', []) .directive('divFloat', ['$animate', function ($animate) { return function (scope, element, iAttrs) { // console.log(iAttrs); scope.$watch(iAttrs.divFloat, function(newVal){ if(newVal == 'left'){ console.log(newVal); $animate.addClass(element, 'logoLeft'); } else { $animate.removeClass(element, 'logoLeft'); } }); }; }]) .animation(".logoLeft", function(){ return { addClass: function(element, className){ console.log('add'); // TweenMax.to(element, 0.35 , {opacity:0, display:'none'}); }, removeClass: function(element, className){ console.log('remove'); // TweenMax.to(element, 0.50 , {delay: 0.35, opacity:1, display:'block'}); } }; }); </code></pre> <p><strong>Update -- Confirmed</strong> This directive is causing conflict? How should I go about handling this as I will have multiple directives that I want to interact with $animation</p> <pre><code>angular.module('fade', []) .directive('hideMe', [ '$animate', function ($animate) { return function (scope, iElement, iAttrs) { scope.$watch(iAttrs.hideMe, function(newValue){ if(newValue){ $animate.removeClass(iElement, 'fade'); } else { $animate.addClass(iElement, 'fade'); } }); }; }]) .animation(".fade", function(){ return { addClass: function(iElement, className){ TweenMax.to(iElement, 0.35 , {opacity:0, display:'none'}); }, removeClass: function(iElement, className){ TweenMax.to(iElement, 0.50 , {delay: 0.35, opacity:1, display:'block'}); } }; }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload