Skip to content

Instantly share code, notes, and snippets.

@plmrry

plmrry/README.md

Last active July 7, 2016 15:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save plmrry/e2d1fbda956ab6f16b5240904041b4ae to your computer and use it in GitHub Desktop.
Save plmrry/e2d1fbda956ab6f16b5240904041b4ae to your computer and use it in GitHub Desktop.
Download ZIP
List Order Transitions
Raw
README.md

To transition an HTML list when it is re-ordered:

  • Create a second "hidden" list where each <li> contains an empty &nbsp; character.
  • Calculate each hidden <li>'s new position (using jQuery).
  • Transition the absolute-ly positioned list elements.

🆒

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var data = ['apple', 'orange', 'banana', 'mango', 'peach'];
var div = d3.select('body').append('div')
.style('height', '100px')
.style('width', '200px')
.style('border', '1px solid green')
div.selectAll('.sorted')
.data(data)
.enter()
.append('div')
.classed('sorted', true)
.html('&nbsp;');
div.selectAll('.moving')
.data(data)
.enter()
.append('div')
.classed('moving', true)
.style('position', 'absolute')
.style('top', 0)
.text(function(d) { return d; });
setInterval(function() {
d3.shuffle(data);
div.selectAll('.sorted')
.data(data)
.each(function(d) {
var target = $(this).position();
div.selectAll('.moving')
.filter(function(e) { return d === e; })
.transition()
.style('top', target.top + 'px');
})
}, 1000)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment