动画元素位置不起作用

时间:2016-06-10 03:29:35

标签: javascript html css animation dragula

我正在尝试实现一个可以拖动'drap元素的网格。我找到了dragula,完全符合我的需求!唯一的问题是,我需要让瓷砖在它们移开时放置动画,让它们被拖动。 (希望很清楚。:))

我尝试添加transition: all 1s ease-out,但所有这些都是不透明的动画。

如何设置位置变化的动画?

JSFiddle

dragula([document.getElementById('left-rm-spill')]);
.container {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.container * {
  background-color: orange;
  border: 1px solid;
  height: 50px;
  width: 100px;
  transition: all 1s ease-out;
}
<script src="https://cdn.rawgit.com/bevacqua/dragula/master/dist/dragula.js"></script>
<link href="https://cdn.rawgit.com/bevacqua/dragula/master/dist/dragula.css" rel="stylesheet" />
<div id="left-rm-spill" class="container">
  <div>Anxious Cab Driver</div>
  <div>Thriving Venture</div>
  <div>Such <a href="http://ponyfoo.com">a good blog</a>
  </div>
  <div>Calm Clam</div>
</div>

0 个答案:

没有答案