使用过渡将项目附加到列表视图
Posted
技术标签:
【中文标题】使用过渡将项目附加到列表视图【英文标题】: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 如果这个答案有效或让你走上正轨,请务必投票并接受它! (先生或女士,即)以上是关于使用过渡将项目附加到列表视图的主要内容,如果未能解决你的问题,请参考以下文章