将项追加到具有转换的列表视图中

Question

为了尽可能地简化我的用例，我从一个硬件中接收了一个文件名列表，然后我遍历该列表并附加到jquery移动列表视图中。

对于我使用的每一次迭代：

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

我尝试过在标记字符串中和选择器中添加数据转换到列表项和锚点，但是不管我做了什么，列表在结束时都会用所有的数据更新一次，而不是在循环时转换每个项。关于.append的工作方式，我缺少一些基本的东西吗？或者我可以在哪里应用过渡？

Answer 1

如果我正确地理解了你，你的目标是使用数据转换在列表中的元素中动画。这似乎不是数据转换的工作方式:当您单击链接时，它控制页面之间的转换，而不是元素本身的动画。

要将元素动画化，我认为您需要自己制作动画。就像这样：

​

$(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>

​