When moving a div with ngAnimate, how can I move adjacent divs smoothly? - angularjs

Question

I have two divs side-by-side (inline block). Using Angular's ngAnimate, I want the left div to slide off the screen and the right div to slide over and take it's place.
Right now what happens is the left div slides away, and once that animation completes, the right div jumps over to take it's spot. How do I make it slide over smoothly at the same time?
Here's a Plunker which demonstrates it a lot better than I can explain it:
https://plnkr.co/edit/ZrtPPkXlttih15ISgEhk
Here's the css/html:
Css:
.well{
overflow-x: hidden;
overflow-y: hidden;
}
.column{
display: inline-block;
width: 100px;
vertical-align: top;
transition: all linear 1.0s;
left: 0px;
position: relative;
opacity: 1;
}
.column.ng-hide{
left: -200px;
opacity: 0;
}
Html:
<div>
<button ng-click="hide = !hide">Toggle</button>
</div>
<div class="well">
<div ng-hide="hide" class="column" style="background-color: lightblue; height: 150px;">
</div>
<div class="column">
This column does not move smothly as the column to the left slides offscreen.
</div>
</div>
Here's that Plunker again, in case you scrolled to the bottom looking for the Plunker link :)
https://plnkr.co/edit/ZrtPPkXlttih15ISgEhk

Answer 1

You simply need to change the width of the column in your transition:
PLUNKR
.well{
overflow-x: hidden;
overflow-y: hidden;
}
.column{
display: inline-block;
width: 100px;
vertical-align: top;
transition: all ease-in-out 1.0s;
left: 0px;
position: relative;
opacity: 1;
}
.column.ng-hide{
width: 0;
left: -200px;
opacity: 0;
}
The reason it wasn't working for you, is due to the fact that the width is remaining the same until the div becomes hidden. This prevents the right column from sliding over as the left column slides out of view. By setting the transition to adjust the width, you can give it that "sliding" effect along the right-edge.
I also changed the animation from linear to ease-in-out to give it a nicer transition