Question

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

linear

它不适合你的原因是由于宽度保持不变直到div被隐藏。当左列滑出视图时，这可以防止右列滑动。通过设置过渡以调整宽度，您可以沿右边缘给它“滑动”效果。

我还将动画从ease-in-out更改为var url = 'http://localhost:3000/authors'; function cool() { d3.json(url, function(data) { dataset = data; }); } const authorData = (state = dataset, action) => { switch (action.type) { case 'DATA_CHART_ALL': return action.data case 'DATA_CHART_FILTER': return action.data default: return state; } }; export default authorData;，以便为其提供更好的转换

使用ngAnimate移动div时，如何顺利移动相邻的div？

1 个答案: