Appending items to listview with transition

Question

To simplify my use case as much as possible, I'm receiving a list of filenames from a piece of hardware which I am then looping through and appending to a jquery mobile listview.

For each iteration i use:

$('ul').append('[markup]')
$('ul').listview('refresh');

I've tried adding data-transition to the list item and the anchor both within the markup string and with a selector but no matter what I do the list updates once, at the end, with all of the data, rather than transitioning each item in as it loops. I am missing something fundamental about how .append works? or about where I can apply transitions?

Answer 1

If I understand you correctly, your goal is to animate in the elements in the list using data-transition. This does not seem to be how data-transition works: it governs the transition between pages when you click on the link, not the animation of the element itself.

To animate the element in, I think you need to do your own animation. Something like this:

$(function() { 
  $("#start").click(function() {
    $.each(["One", "Two", "Three"], function (i, val) {
      $('ul').append('<li style="display: none" class="closed"><a>' + val + '</a></li>');
      $('ul').listview('refresh');
      $('ul .closed').slideDown(300, function() { $(this).removeClass('closed'); });
    });    
  });
});

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<a href="#" id="start" class="ui-btn">Start</a>
<ul data-role="listview">
</ul>