ngAnimateでdivを移動するとき、隣接するdivをスムーズに移動するにはどうすればよいですか？

Question

私はサイドバイサイド（インラインブロック）を2つ持っています。 AngularのngAnimateを使用して、左のdivを画面外にスライドさせ、右のdivをスライドさせてその場所に配置します。

今のところ、左のdivがスライドして、そのアニメーションが完了すると、右のdivがジャンプしてその位置を取得します。同時に滑らかにスライドさせるにはどうすればいいですか？ここで

は、私はそれを説明するよりも、それはかなり良く示していPlunkerです：

https://plnkr.co/edit/ZrtPPkXlttih15ISgEhk

ここでは、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> 

ここ

はPlunkerは再び、場合にあなたがPlunkerリンクを探して一番下までスクロールしたことだ:)

https://plnkr.co/edit/ZrtPPkXlttih15ISgEhk

Answer 1

あなたは単にあなたの移行の列の幅を変更する必要があります。 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; 
} 

なぜなら、あなたのために働いていなかった理由は、divが非表示になるまで幅が同じままであるからです。これにより、左の列が見えなくなり、右の列が滑り落ちるのを防ぎます。幅を調整するようにトランジションを設定することで、右端に沿って「スライド」効果を与えることができます。

また、私はそれを美しい立派移行