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

Essential CSS Pseudo Classes

CSS Pseudo classes are the heart of CSS. Most of these classes are supported by all major browsers today. They make writing CSS simple and fun, as if there is no problem as such that can’t be handled with CSS Pseudo Classes without modifying the HTML. Let’s begin with some unknown Pseudo classes first.

:enabled and :disabled
Identifying elements state has become easy with these two classes. Also, they can be used as a good alternative to the enabled and disabled attribute selectors.



:empty
Have you ever got into a situation where some dynamically added empty elements disturb the layout? Well, the :empty class is here to help

:target
:target is generally used to point out/display/go to the selected element which is triggered by the hash(#) links. In web 2.0 this trend is becoming a quite famous as most developers are choosing to develop single page websites.

:nth-child()
This is a super-powerful class that can be used in most difficult situations. This class solves the issues that can only be resolved using JavaScript or jQuery. It accepts integer values and ‘odd’ and ‘even’ keywords. This can also be used in many different ways, such as - li:nth-child(2n+2), li:nth-child(-2n+3), :nth-of-type(), nth-last-child(), :nth-last-of-type().



:not()
This Pseudo class tells browser to apply CSS to all elements except the on that is in the parentheses of :not() class.

:hover

This is a widely known and used Pseudo class, almost all front-end developers are aware of it because of the most important use of it – 

a{ }

a:hover{}

We can easily include some simple classes in the same category - :focus, :active, :visited

:before and :after

These are the life saver classes! They help in most critical situations allowing us to make use of two virtual HTML elements without actually adding the elements in HTML. 

Additionally there are the :first-child, :last-child simple pseudo classes, you can try some simple examples with it and see for yourself :)