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?
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>
