Angular Tab Slider Directive Part 2

This is continuation to the Slider Directive (Angularjs Directive for an Animated Highlight Slider).

Refer this git for full source code.


Usage : 

Directive : animated-tabs

Directive attributes :

duration : duration for sliding (should match with the transition period).

selected-class : The class defined in this will be applied to active class. A custom defined class can be defined as required

selected : Model that will be used for triggering the animation. On changing this either using ngClick or through other means one can trigger the animation. The value given here should match the id of the immediate child of the directive defined in the html

tab-active : used to activate the tab active.

The directive works in the following manner.

1. All tabs are assumed to be inline elements
2. On linking (load) a child is added as the first node to the directive, which is hidden and positioned absolute to the rest of the tabs.
3. On click the value of the selected scope variable is changed which triggers the watch callback
4. the position of the previous active block and the current active block is calculated.
5. The hidden child element is first positioned over the block previous tab position and then animated from that position to the current position.
6. After the animation the element is hidden and the current tab is activated.