使用过渡将项目附加到列表视图

Posted 2023-05-09

【中文标题】使用过渡将项目附加到列表视图

【英文标题】：Appending items to listview with transition

【发布时间】：2017-10-14 13:32:54

【问题描述】：

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

对于我使用的每次迭代：

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

我已经尝试在标记字符串和选择器中向列表项和锚点添加数据转换，但无论我做什么，列表都会更新一次，最后使用所有数据，而不是在循环时转换每个项目。我缺少一些关于 .append 如何工作的基本知识？或者关于我可以在哪里应用过渡？

【问题讨论】：

元素的显示将由listview 方法控制。

【参考方案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>

【讨论】：

祝福你，先生。

@SteveMcGuigan 如果这个答案有效或让你走上正轨，请务必投票并接受它！

（先生或女士，即）