Implement a growing and shrinking tab bar animation with CSS and JS

Question

I'm very new to CSS and web technologies in general, and I am to implement a tabbed navigation bar indicator. Right now, I have it working correctly using transitions for animations. For example:

What I have:
From tab 2 to tab 3
Start of animation
| T1 | T2 | T3 |
      ----
Middle of animation
| T1 | T2 | T3 |
        ----
End of animation
| T1 | T2 | T3 |
           ----

What I want:
From tab 2 to tab 3
Start of animation
| T1 | T2 | T3 |
      ----
Middle of animation
| T1 | T2 | T3 |
      --------- (Grow from prev tab to next tab)
End of animation
| T1 | T2 | T3 |
           ---- (Shrink to selected tab)

All smoothly animated. I implemented the what I have using CSS by adding a transition to the margin that changes depending on what tab is selected. I tried adding another delayed transition to implement what I want, but when I add the classes for transition (I'm using Enyo) it seems that both are getting applied at the same time, and neither of them work as expected. I am adding both, a class with a transition that starts immediately, and one that has a delay that starts when the first one's animation is finished, but I am guessing doing this is not supported in CSS.

What would be a good way to implement this? Preferably one that in reusable. Thanks.

Edit: Some code:

adjustSlider: function(){
    if(this.vote == 1){
        this.$.slider.addClass('slider-up-start slider-up-end');
        this.$.slider.removeClass('slider-down-start slider-down-end');

    }
    if(this.vote == -1){
        this.$.slider.addClass('slider-down-start slider-down-end');
        this.$.slider.removeClass('slider-up-start slider-up-end');
    }
},

 .slider-up-start{
background-color: #27AE60;
width: 100%;
margin-left: 0%;
height: .3em;
-webkit-transition: margin-left .3s, width .3s, background-color .3s;
    transition: margin-left .3s, width .3s, background-color .3s;
}

.slider-up-end{
width: 50%;
transition: width .3s;
transition-delay: .3s;
}

.slider-down-start{
background-color: #C0392B;
width: 100%;
margin-left: 0%;
height: .3em;
-webkit-transition: margin-left .3s, background-color .3s;
    transition: margin-left .3s, background-color .3s;
}

.slider-down-end{
width: 50%;
margin-left: 50%;
transition: width .3s, margin-left .3s;
transition-delay: .3s;
}

I am just testing the transition right now, not webkit. I don't think applying both classes (one with a delay) works how I hoped it would.

Without code, it is hard to say for sure whether this would work for you, but there is a transition-delay property that should give you a push in the right direction. https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay — SpenserJ, Jun 21 '13 at 19:07
I am using transition delay, but I don't think it works how I need it to for this. I updated with some code. — user1858704, Jun 21 '13 at 19:12
Reproduce your code in http://codepen.io/pen/, since the HTML would be beneficial as well. — SpenserJ, Jun 21 '13 at 19:40

Implement a growing and shrinking tab bar animation with CSS and JS

0 Answers0