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)

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;
}