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