Angularjs - Slide Divs Up And Down With Z-index Changes Isn't Being Respected

Please see the JSFiddle here which shows my issue: http://jsfiddle.net/mlippy/zkH7S/ I'm attempting to shuffle divs up and down a list with those divs moving up hiding the divs mov

Solution 1:

You're right, there is a better way to do it.

See, your code for transition affects all properties:

.widget.moveUp {
    z-index: 100!important;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.widget.moveDown {
    z-index: 1!important;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

So my guess is that your transition to z-index is also taking 1 second to happen.

Guessing that, I've took the liberty to change these lines of code to target a transition only on the top property, which is the only one that should be affect in your case.

.widget {
    width: 100%;
    height: 40px;
    position: absolute;
    clear: both;
    z-index: 1;
    -webkit-transition: top 1s ease-in-out 0s;
    -moz-transition: top 1s ease-in-out 0s;
    transition: top 1s ease-in-out 0s;
}
.widget.moveUp {
    z-index: 100!important;
}
.widget.moveDown {
    z-index: 1!important;
}

Here, I updated your FIDDLE