Monday, February 24, 2014

AngularJS Toggle Class with Animation

The jQuery Toggle Class was much easy to work with, wasn't it? Yes! I agree with it! But, toggling CSS classes with AngularJS is much more interesting. How? Well, with jQuery we do direct DOM manipulations. For example, if we want to toggle CSS class on the <section> element, we have to tell the browser to traverse the DOM until it finds the <section> element and then add or remove the class, which directly affects on the performance of the page/application. 

With AngularJS the DOM manipulation becomes more relevant because it connects to the HTML elements via API methods and provides more scope to the data with custom attributes.

A quick demo:


Open this fiddle in JSFiddle to check the files I used for this demo.

Related Articles: 
AngularJS Add Class and Toggle Class