{"id":1817,"date":"2022-08-30T15:19:41","date_gmt":"2022-08-30T15:19:41","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/ng-animate-with-javascript-throwing-exeption-errors-when-out-animation-is-cancelled-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:41","modified_gmt":"2022-08-30T15:19:41","slug":"ng-animate-with-javascript-throwing-exeption-errors-when-out-animation-is-cancelled-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/ng-animate-with-javascript-throwing-exeption-errors-when-out-animation-is-cancelled-collection-of-common-programming-errors\/","title":{"rendered":"ng-animate with javascript throwing Exeption errors when out animation is cancelled-Collection of common programming errors"},"content":{"rendered":"<pre><code>angular.module('AppAnimations', [])\n.animation('ecocool-in', ['$rootScope', function() {\n    return {\n        setup: function(element) {\n            TweenMax.set(element, {opacity:0, right:'100px', width:'100%', position:'aboslute'})\n            TweenMax.set($('body'), {overflow: 'hidden'})\n        },\n        start: function(element, done) {\n            TweenMax.to(element, .6, {delay:.6,opacity:1, right:0, ease:Power2.easeOut, onComplete:function() {\n                done();\n                TweenMax.set(element, {opacity:1, right:0, width:'100%', position:'relative'})\n                TweenMax.set($('body'), {overflow: 'scroll'})\n            }})\n        }\n    }\n}])\n.animation('ecocool-out', ['$rootScope', function() {\n    return {\n        setup: function(element) {\n            TweenMax.set(element, {width:'100%'})\n        },\n        start : function(element, done) {\n            TweenMax.to(element, .6, {opacity:0, y:+100,ease:Power2.easeIn, onComplete:done})\n        },\n        cancel: function(element, done) {\n            TweenMax.to(element, .5, {opacity:0, y:100, ease:Power2.easeIn, onComplete:done})\n        }\n    }\n}])\n<\/code><\/pre>\n<p>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.<\/p>\n<p>the Cancel is only called when the animation is currently playing and another link is clicked.<\/p>\n<p>When I do that, I get this:<\/p>\n<pre><code>[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]\n\n\n...r\"),debug:function(){var c=e(\"debug\");return function(){b&amp;&amp;c.apply(a,arguments)}...\n\nangular.min.js (line 63)\nNS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]\n\n\n_cs = _getComputedStyle(target, \"\");\n\n29\nTweenMax.js (line 4045)\n<\/code><\/pre>\n<p>on Firefox.<\/p>\n<p>and on safari I get this:<\/p>\n<pre><code>[Error] TypeError: 'undefined' is not an object (evaluating 'style.zIndex')\n    _onInitTween (TweenMax.js, line 4049)\n    _initProps (TweenMax.js, line 6091)\n    _init (TweenMax.js, line 6050)\n    render (TweenMax.js, line 208)\n    render (TweenMax.js, line 5757)\n    _updateRoot (TweenMax.js, line 5878)\n    dispatchEvent (TweenMax.js, line 5246)\n    _tick (TweenMax.js, line 5290)\n<\/code><\/pre>\n<ol>\n<li>Do i need $rootScope? if this is a ng-view<\/li>\n<li>do I need to do something else with cancel? thats is where the errors are throwing.<\/li>\n<\/ol>\n<p>any other suggestions or optimizations would help. thanks!<\/p>\n<p id=\"rop\"><small>Originally posted 2013-12-02 01:41:10. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>angular.module(&#8216;AppAnimations&#8217;, []) .animation(&#8216;ecocool-in&#8217;, [&#8216;$rootScope&#8217;, function() { return { setup: function(element) { TweenMax.set(element, {opacity:0, right:&#8217;100px&#8217;, width:&#8217;100%&#8217;, position:&#8217;aboslute&#8217;}) TweenMax.set($(&#8216;body&#8217;), {overflow: &#8216;hidden&#8217;}) }, 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:&#8217;100%&#8217;, position:&#8217;relative&#8217;}) TweenMax.set($(&#8216;body&#8217;), {overflow: &#8216;scroll&#8217;}) }}) } } }]) .animation(&#8216;ecocool-out&#8217;, [&#8216;$rootScope&#8217;, function() { return { setup: function(element) { TweenMax.set(element, {width:&#8217;100%&#8217;}) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1817","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1817"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1817\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}