Twitter-Post-Fetcher与Jquery（可能还有Vue.js）(Twitter-Post-Fetcher with Jquery (and possibly Vue.js))

 我正在使用Twitter-Post-Fetcher来获取最新的五条推文。 所以，如果我这样做： 
 
var latestTweets = {
    "id": '695269278174572544',
    "domId": 'latest_tweets',
    "maxTweets": 5,
    "showTime": false,
    "enableLinks": true,
    "showInteraction": false,
    "showUser": false
};
twitterFetcher.fetch(latestTweets);
 
 我收到了最新的5条推文。 只有推文本身，如预期的那样。 现在，如何逐个显示它们，具有淡入/淡出效果？ 我能够使用Jquery对硬编码的unorderd list执行此操作。 像这样（Jsfiddle 在这里 ）： 
 
<div id="latest-tweets">
    <ul>
        <li>pseudo-tweet1</li>
        <li>pseudo-tweet2</li>
        <li>pseudo-tweet3</li>
        <li>pseudo-tweet4</li>
        <li>pseudo-tweet5</li>
    </ul>
</div>
 
 
$(document).ready(function() {
    var delay = 1000;
    $('ul > li').each(function() {
        $(this).show().delay(delay).fadeToggle(2000);
        $(this).hide().fadeToggle(1000);
       delay += 3000;
    });
});
 
 上述代码按照预期以节奏的方式呈现列表项中的每一个可见/不可见。 
 
 但是，如何插入实际数据，更具体地说，如何从上面的Twitter-Post-Fetcher调用中插入结果？ 
 
 我尝试将Vue.js添加到混合中，结果很奇怪，例如this ， this和this 。 
 
 我当然愿意接受完全不同的问题解决方案，可以重新表述为： 如何一次显示一条第n条推文列表？ 

I'm using Twitter-Post-Fetcher, to fetch the latest five tweets. So, if I do this:
 
var latestTweets = {
    "id": '695269278174572544',
    "domId": 'latest_tweets',
    "maxTweets": 5,
    "showTime": false,
    "enableLinks": true,
    "showInteraction": false,
    "showUser": false
};
twitterFetcher.fetch(latestTweets);
 
I get the latest 5 tweets. Only the tweets themselves, as intended. Now, how can display them one by one, with a fade in/out effect? I'm able to do that to a hard-coded unorderd list with Jquery. Like this (Jsfiddle here):
 
<div id="latest-tweets">
    <ul>
        <li>pseudo-tweet1</li>
        <li>pseudo-tweet2</li>
        <li>pseudo-tweet3</li>
        <li>pseudo-tweet4</li>
        <li>pseudo-tweet5</li>
    </ul>
</div>
 
 
$(document).ready(function() {
    var delay = 1000;
    $('ul > li').each(function() {
        $(this).show().delay(delay).fadeToggle(2000);
        $(this).hide().fadeToggle(1000);
       delay += 3000;
    });
});
 
The above code renders each one of the list items visible/invible in a paced fashion, as intended. 
 
However, how do I insert real data, more specifically, how do I insert the results from the Twitter-Post-Fetcher call above? 
 
I tried adding Vue.js to the mix, with weird results, such as this, this and this.
 
I'm of course open to entirely different solutions to the problem, which can be reformulated as: how to display a list of nth tweets, one at a time?

原文：https://stackoverflow.com/questions/35541569