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

i have 2 divs side-by-side (inline block). using angular's nganimate, want left div slide off screen , right div slide on , take it's place.

right happens left div slides away, , once animation completes, right div jumps on take it's spot. how make slide on smoothly @ same time?

here's plunker demonstrates lot better can explain it:

https://plnkr.co/edit/zrtppkxlttih15isgehk

here's css/html:

css:

.well{   overflow-x: hidden;   overflow-y: hidden;  }  .column{   display: inline-block;   width: 100px;   vertical-align: top;   transition: 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">     column not move smothly column left slides offscreen. </div> </div> 

here's plunker again, in case scrolled bottom looking plunker link :)

https://plnkr.co/edit/zrtppkxlttih15isgehk

you need change width of column in transition: plunkr

.well{   overflow-x: hidden;   overflow-y: hidden;  }  .column{   display: inline-block;   width: 100px;   vertical-align: top;   transition: ease-in-out 1.0s;   left: 0px;   position: relative;   opacity: 1; }  .column.ng-hide{   width: 0;   left: -200px;   opacity: 0; } 

the reason wasn't working you, due fact width remaining same until div becomes hidden. prevents right column sliding on left column slides out of view. setting transition adjust width, can give "sliding" effect along right-edge.

i changed animation linear ease-in-out give nicer transition