ng-animate with javascript throwing Exeption errors when out animation is cancelled-Collection of common programming errors
angular.module('AppAnimations', [])
.animation('ecocool-in', ['$rootScope', function() {
return {
setup: function(element) {
TweenMax.set(element, {opacity:0, right:'100px', width:'100%', position:'aboslute'})
TweenMax.set($('body'), {overflow: 'hidden'})
},
start: function(element, done) {
TweenMax.to(element, .6, {delay:.6,opacity:1, right:0, ease:Power2.easeOut, onComplete:function() {
done();
TweenMax.set(element, {opacity:1, right:0, width:'100%', position:'relative'})
TweenMax.set($('body'), {overflow: 'scroll'})
}})
}
}
}])
.animation('ecocool-out', ['$rootScope', function() {
return {
setup: function(element) {
TweenMax.set(element, {width:'100%'})
},
start : function(element, done) {
TweenMax.to(element, .6, {opacity:0, y:+100,ease:Power2.easeIn, onComplete:done})
},
cancel: function(element, done) {
TweenMax.to(element, .5, {opacity:0, y:100, ease:Power2.easeIn, onComplete:done})
}
}
}])
When I run the website and I click a route it calls the ecocool-out animation and it plays fine. When I call the ecocool-in animation it plays fine.
the Cancel is only called when the animation is currently playing and another link is clicked.
When I do that, I get this:
[Exception... "Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost/js/TweenMax.js :: p._onInitTween :: line 4045" data: no]
...r"),debug:function(){var c=e("debug");return function(){b&&c.apply(a,arguments)}...
angular.min.js (line 63)
NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]
_cs = _getComputedStyle(target, "");
29
TweenMax.js (line 4045)
on Firefox.
and on safari I get this:
[Error] TypeError: 'undefined' is not an object (evaluating 'style.zIndex')
_onInitTween (TweenMax.js, line 4049)
_initProps (TweenMax.js, line 6091)
_init (TweenMax.js, line 6050)
render (TweenMax.js, line 208)
render (TweenMax.js, line 5757)
_updateRoot (TweenMax.js, line 5878)
dispatchEvent (TweenMax.js, line 5246)
_tick (TweenMax.js, line 5290)
- Do i need $rootScope? if this is a ng-view
- do I need to do something else with cancel? thats is where the errors are throwing.
any other suggestions or optimizations would help. thanks!