{"id":1996,"date":"2014-01-31T20:51:22","date_gmt":"2014-02-01T02:51:22","guid":{"rendered":"http:\/\/www.wiredprairie.us\/blog\/?p=1996"},"modified":"2014-01-31T20:51:22","modified_gmt":"2014-02-01T02:51:22","slug":"animating-an-elements-visibility-using-angularjs","status":"publish","type":"post","link":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1996","title":{"rendered":"Animating an element&rsquo;s visibility using AngularJS"},"content":{"rendered":"<p>There was a question on StackOverflow about animating an element and I wanted to give it a shot, so here goes:<\/p>\n<p><a title=\"http:\/\/jsfiddle.net\/wiredprairie\/5tFCZ\/1\/\" href=\"http:\/\/jsfiddle.net\/wiredprairie\/5tFCZ\/1\/\">http:\/\/jsfiddle.net\/wiredprairie\/5tFCZ\/1\/<\/a><\/p>\n<p><a href=\"http:\/\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2014\/01\/image.png\"><img loading=\"lazy\" title=\"image\" style=\"border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; float: none; padding-top: 0px; padding-left: 0px; margin: 0px auto; border-left: 0px; display: block; padding-right: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2014\/01\/image_thumb.png\" width=\"192\" height=\"113\" \/><\/a><\/p>\n<p>&#160;<\/p>\n<p>Imagine nearly the simplest Angular JS application possible:<\/p>\n<pre class=\"csharpcode\"><span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">ng-app<\/span><span class=\"kwrd\">=&quot;App&quot;<\/span><span class=\"kwrd\">&gt;<\/span>\n    <span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">ng-init<\/span><span class=\"kwrd\">=&quot;checked=true&quot;<\/span><span class=\"kwrd\">&gt;<\/span>\n        <span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span>\n            <span class=\"kwrd\">&lt;<\/span><span class=\"html\">label<\/span><span class=\"kwrd\">&gt;<\/span>\n                <span class=\"kwrd\">&lt;<\/span><span class=\"html\">input<\/span> <span class=\"attr\">type<\/span><span class=\"kwrd\">=&quot;checkbox&quot;<\/span> <span class=\"attr\">ng-model<\/span><span class=\"kwrd\">=&quot;checked&quot;<\/span> <span class=\"kwrd\">\/&gt;<\/span>Is Visible...<span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">label<\/span><span class=\"kwrd\">&gt;<\/span>\n        <span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span>\n        <span class=\"kwrd\">&lt;<\/span><span class=\"html\">div<\/span> <span class=\"attr\">class<\/span><span class=\"kwrd\">=&quot;sample&quot;<\/span> <span class=\"attr\">ng-class<\/span><span class=\"kwrd\">=&quot;{ hidden: !checked }&quot;<\/span><span class=\"kwrd\">&gt;<\/span>Visible...<span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span>\n    <span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span>\n<span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">div<\/span><span class=\"kwrd\">&gt;<\/span><\/pre>\n<p><style type=\"text\/css\">\n.csharpcode, .csharpcode pre\n{\n\tfont-size: small;\n\tcolor: black;\n\tfont-family: consolas, \"Courier New\", courier, monospace;\n\tbackground-color: #ffffff;\n\t\/*white-space: pre;*\/\n}\n.csharpcode pre { margin: 0em; }\n.csharpcode .rem { color: #008000; }\n.csharpcode .kwrd { color: #0000ff; }\n.csharpcode .str { color: #006080; }\n.csharpcode .op { color: #0000c0; }\n.csharpcode .preproc { color: #cc6633; }\n.csharpcode .asp { background-color: #ffff00; }\n.csharpcode .html { color: #800000; }\n.csharpcode .attr { color: #ff0000; }\n.csharpcode .alt \n{\n\tbackground-color: #f4f4f4;\n\twidth: 100%;\n\tmargin: 0em;\n}\n.csharpcode .lnum { color: #606060; }<\/style>\n<\/p>\n<p>There is only a single property called <strong>checked<\/strong> as part of the data model. There\u2019s a <strong>checkbox <\/strong>that when unchecked, will cause the text \u201cVisible\u201d to be hidden.<\/p>\n<p>I\u2019m going to use jQuery as the simple animation engine, but you could use what ever you\u2019d like. The latest versions of jQuery, angular, and angular-animate are needed:<\/p>\n<pre class=\"csharpcode\"><span class=\"kwrd\">&lt;<\/span><span class=\"html\">script<\/span> <span class=\"attr\">src<\/span><span class=\"kwrd\">=&quot;http:\/\/code.jquery.com\/jquery-1.10.1.min.js&quot;<\/span><span class=\"kwrd\">&gt;&lt;\/<\/span><span class=\"html\">script<\/span><span class=\"kwrd\">&gt;<\/span>\n&lt;script src=<span class=\"str\">&quot;http:\/\/code.angularjs.org\/1.2.10\/angular.min.js&quot;<\/span>&gt;&lt;\/script&gt;\n&lt;script src=<span class=\"str\">&quot;http:\/\/code.angularjs.org\/1.2.10\/angular-animate.min.js&quot;<\/span>&gt;<span class=\"kwrd\">&lt;\/<\/span><span class=\"html\">script<\/span><span class=\"kwrd\">&gt;<\/span><\/pre>\n<style type=\"text\/css\">\n.csharpcode, .csharpcode pre\n{\n\tfont-size: small;\n\tcolor: black;\n\tfont-family: consolas, \"Courier New\", courier, monospace;\n\tbackground-color: #ffffff;\n\t\/*white-space: pre;*\/\n}\n.csharpcode pre { margin: 0em; }\n.csharpcode .rem { color: #008000; }\n.csharpcode .kwrd { color: #0000ff; }\n.csharpcode .str { color: #006080; }\n.csharpcode .op { color: #0000c0; }\n.csharpcode .preproc { color: #cc6633; }\n.csharpcode .asp { background-color: #ffff00; }\n.csharpcode .html { color: #800000; }\n.csharpcode .attr { color: #ff0000; }\n.csharpcode .alt \n{\n\tbackground-color: #f4f4f4;\n\twidth: 100%;\n\tmargin: 0em;\n}\n.csharpcode .lnum { color: #606060; }<\/style>\n<p>Using the <strong>ng-class<\/strong> directive (<a href=\"http:\/\/docs.angularjs.org\/api\/ng.directive:ngClass\" target=\"_blank\">reference<\/a>), a CSS <strong>class <\/strong>named <strong>hidden<\/strong> is added when the <strong>checkbox <\/strong>is <strong>not <\/strong>checked. <\/p>\n<p>The application module and animation API are defined:<\/p>\n<pre class=\"csharpcode\">angular.module(<span class=\"str\">'App'<\/span>, [<span class=\"str\">'ngAnimate'<\/span>]).animation(<span class=\"str\">'.sample'<\/span>, <span class=\"kwrd\">function<\/span> () {\n    <span class=\"kwrd\">return<\/span> {\n        addClass: <span class=\"kwrd\">function<\/span> (element, className, done) {\n            <span class=\"kwrd\">if<\/span> (className === <span class=\"str\">'hidden'<\/span>) {\n                jQuery(element)\n                    .css({\n                    opacity: 1\n                })\n                    .animate({\n                    opacity: 0\n                }, 500, done);\n            } <span class=\"kwrd\">else<\/span> {\n                done();\n            }\n        },\n        removeClass: <span class=\"kwrd\">function<\/span> (element, className, done) {\n            <span class=\"kwrd\">if<\/span> (className === <span class=\"str\">'hidden'<\/span>) {\n                jQuery(element)\n                    .css({\n                    opacity: 0\n                })\n                    .animate({\n                    opacity: 1\n                }, 500, done);\n            } <span class=\"kwrd\">else<\/span> {\n                done();\n            }\n        }\n    }\n});<\/pre>\n<p>&#160;<\/p>\n<p>The only element animated on the page is using a CSS <strong>class <\/strong>name of <strong>sample. <\/strong>Whenever Angular adds or removes a CSS <strong>class<\/strong> from a matching HTML element, the corresponding code is executed. As it\u2019s possible for multiple class names to be passed to the functions, per the guidelines, I\u2019ve made sure that the code only executes when appropriate by filtering on the class name of <strong>hidden<\/strong>. As it\u2019s toggling the state, the first action taken is to fully make opaque or transparent, then animate to zero or one depending on whether the <strong>class<\/strong> is being added or removed.<\/p>\n<p>And that\u2019s it! Of course, the code could have been more sophisticated, but it was all I needed.<\/p>\n<p>By the way, there\u2019s no need for a CSS class named hidden that has any CSS properties (it can be undefined completely). The animation code handles the visibility properly. <\/p>\n<style type=\"text\/css\">\n.csharpcode, .csharpcode pre\n{\n\tfont-size: small;\n\tcolor: black;\n\tfont-family: consolas, \"Courier New\", courier, monospace;\n\tbackground-color: #ffffff;\n\t\/*white-space: pre;*\/\n}\n.csharpcode pre { margin: 0em; }\n.csharpcode .rem { color: #008000; }\n.csharpcode .kwrd { color: #0000ff; }\n.csharpcode .str { color: #006080; }\n.csharpcode .op { color: #0000c0; }\n.csharpcode .preproc { color: #cc6633; }\n.csharpcode .asp { background-color: #ffff00; }\n.csharpcode .html { color: #800000; }\n.csharpcode .attr { color: #ff0000; }\n.csharpcode .alt \n{\n\tbackground-color: #f4f4f4;\n\twidth: 100%;\n\tmargin: 0em;\n}\n.csharpcode .lnum { color: #606060; }<\/style><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There was a question on StackOverflow about animating an element and I wanted to give it a shot, so here goes: http:\/\/jsfiddle.net\/wiredprairie\/5tFCZ\/1\/ &#160; Imagine nearly the simplest Angular JS application possible: &lt;div ng-app=&quot;App&quot;&gt; &lt;div ng-init=&quot;checked=true&quot;&gt; &lt;div&gt; &lt;label&gt; &lt;input type=&quot;checkbox&quot; ng-model=&quot;checked&quot; \/&gt;Is Visible&#8230;&lt;\/label&gt; &lt;\/div&gt; &lt;div class=&quot;sample&quot; ng-class=&quot;{ hidden: !checked }&quot;&gt;Visible&#8230;&lt;\/div&gt; &lt;\/div&gt; &lt;\/div&gt; There is only a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[4],"tags":[150,38],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pd5QIe-wc","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1820,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1820","url_meta":{"origin":1996,"position":0},"title":"Knockout binding for JavaScript route fixup","date":"January 25, 2013","format":false,"excerpt":"Part one. After the first round, I felt compelled to KnockOut the code a bit more. I\u2019d mentioned I wasn\u2019t pleased with the code exactly. It needed some refactoring. So, I\u2019ve created a new Knockout binding handler. This binding handler replaces\u00a0 named parameters with a model\u2019s properties in a path.\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1397,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1397","url_meta":{"origin":1996,"position":1},"title":"A post not related to Nest thermostat hardware&hellip;.","date":"January 3, 2012","format":false,"excerpt":"I typed in https:\/\/www.nest.com this evening and instead of the nice looking Nest.com web site, I got this: What?! I hadn\u2019t actually noticed that I\u2019d typed https at first, so I was a bit baffled for a moment. After closer investigation, Nest doesn\u2019t have HTTPS apparently for their marketing\/support web\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"SNAGHTML69c9dbf8","src":"https:\/\/i0.wp.com\/www.wiredprairie.us\/blog\/wp-content\/uploads\/2012\/01\/SNAGHTML69c9dbf8_thumb.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1837,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1837","url_meta":{"origin":1996,"position":2},"title":"How to debug an underscore.js template","date":"February 13, 2013","format":false,"excerpt":"Given a simple template like this: <div class=\"solution\" data-question-id=\"<%= model.get('Id') %>\"> <div class=\"title\"><%= model.get('Name') %><\/div> <div class=\"company\"><%= model.get('Company') %><\/div> <div class=\"version\"><%= model.get('Version') %><\/div> <div class=\"detail\"><%= model.get('Summary') %><\/div> <div class=\"actions\"> <a href=\"\/#solution\/<%= Id %>\/<%= model.get('Id') %>\">Detail<\/a> <\/div> <\/div> And using your favorite JavaScript interactive debugger (Visual Studio 2012 is my favorite\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1974,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1974","url_meta":{"origin":1996,"position":3},"title":"Loading Models in NodeJS","date":"December 2, 2013","format":false,"excerpt":"I\u2019d answered a question on StackOverflow about where to put \u201cmodels\u201d in a NodeJS project. I wanted to elaborate on the simple auto loader I use to load a folder full of models (and I use this pattern other places as well). Normally, I create a folder called models: Inside\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1345,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1345","url_meta":{"origin":1996,"position":4},"title":"Creating a simple Entity Reference system for Ember.js","date":"December 28, 2011","format":false,"excerpt":"I had some data stored in a structure similar to this: Nothing too fancy. A table of Gift(s) and a table of Person(s). Each gift had a foreign key relationship to a Person (the person who \u201cgave\u201d the gift). Since some people may give several gifts, I didn\u2019t want to\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1836,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1836","url_meta":{"origin":1996,"position":5},"title":"Smarter queuing of files using jQuery deferred and when","date":"February 13, 2013","format":false,"excerpt":"I had a somewhat simple need \u2026a single web page style application using Backbone.JS had multiple template files it needed to download, if and only if the files hadn\u2019t already been downloaded before. While I suppose I could have relied on browser caching, I wanted to manage the requests in\u2026","rel":"","context":"In &quot;Coding&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1996"}],"collection":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/comments?post=1996"}],"version-history":[{"count":1,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1996\/revisions"}],"predecessor-version":[{"id":1997,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/posts\/1996\/revisions\/1997"}],"wp:attachment":[{"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/media?parent=1996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/categories?post=1996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wiredprairie.us\/blog\/index.php\/wpjson\/wp\/v2\/tags?post=1996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}