使用 ngAnimate 移动 div 时，如何平滑移动相邻的 div？

Question

我有两个 div 并排（内联块）。使用 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 link :)

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 被隐藏。这可以防止右列在左列滑出视图时滑过。通过设置过渡来调整宽度，你可以给它沿右边缘的“滑动”效果。

我还将动画从 linear 更改为 ease-in-out 以提供更好的过渡效果

使用 ngAnimate 移动 div 时，如何平滑移动相邻的 div？

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

angularjs

ng-animate