Twitter-Post-Fetcher with Jquery（可能还有 Vue.js）

Question

我正在使用 Twitter-Post-Fetcher 来获取最新的 5 条推文。所以，如果我这样做：

var latestTweets = {
    "id": '695269278174572544',
    "domId": 'latest_tweets',
    "maxTweets": 5,
    "showTime": false,
    "enableLinks": true,
    "showInteraction": false,
    "showUser": false
};
twitterFetcher.fetch(latestTweets);

我收到了最新的 5 条推文。正如预期的那样，只有推文本身。现在，如何用淡入淡出 in/out 效果一个一个地显示它们？我可以用 Jquery 对硬编码的 unorderd list 执行此操作。像这样（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;
    });
});

以上代码按预期以有节奏的方式呈现每个列表项 visible/invible。

但是，如何插入真实数据，更具体地说，如何插入上面 Twitter-Post-Fetcher 调用的结果？

我尝试将 Vue.js 添加到组合中，结果很奇怪，例如 this, this and this。

我当然愿意接受完全不同的问题解决方案，可以重新表述为：如何一次显示第 n 个推文的列表？

Answer 1

查看此 Vue 解决方案：

https://jsfiddle.net/sfgry1ek/32/

您需要使用 customCallback 来告诉 twitterFetcher 如何处理推文。然后使用 v-for 为每条推文重复 li 元素。您还可以在元素上设置 transition="fade"，这会使它们在 show/hide 时动画化。然后只是一些时序逻辑在正确的时间显示它们。

html

<div id="latest-tweets">
  <ul>
    <li v-for="tweet in tweets" transition="fade" v-show="showing == $index">{{{ tweet }}}</li>
  </ul>
</div>

js

new Vue({
  el: '#latest-tweets',
  data: function(){
    return {
      tweets: [],
      showing: 0
    };
  },
  methods:{
    fetch:function(){
        var LatestTweets = {
            "id": '695269278174572544',
            "maxTweets": 5,
            "showTime": false,
            "enableLinks": true,
            "customCallback":this.setTweets,
            "showInteraction": false,
            "showUser": false
            };
      twitterFetcher.fetch(LatestTweets);
    },
    setTweets(tweets){
        this.tweets = tweets;
    },
    rotate: function(){
      if(this.showing == this.tweets.length - 1){
        this.showing = -1;
      }
      this.showing += .5;
      setTimeout(function(){
        this.showing += .5;
      }.bind(this), 600);
    }
  },
  ready:function() {
    this.fetch();
    setInterval(this.rotate, 6000);
  }
});

css

.fade-transition {
  transition: all .3s ease;
}

.fade-enter, .fade-leave {
  opacity: 0;
}

编辑：删除了 JS fade 实现以支持 CSS 一个

Twitter-Post-Fetcher with Jquery（可能还有 Vue.js）

Twitter-Post-Fetcher with Jquery (and possibly Vue.js)

twitter

jquery

vue.js