Animate elements position not working

左心房为你撑大大i 提交于 2019-12-25 04:43:14

问题


I'm trying to implement a grid which you can drag 'n drap elements. I found dragula, which suits my needs exactly! The only thing is, I need the tiles to animate when they move out of the way to let in the one being dragged. (Hope that's clear. :))

I tried adding a transition: all 1s ease-out, but all that did, was animated the opacity.

How can I animate the change of positions?

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>

来源:https://stackoverflow.com/questions/37739440/animate-elements-position-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!