title: Vue adding items to list with animation
body: <p>I've created a Vue application with socket.io that is showing real time information. Now I want some nice animation but I don't know how to do this with Vue.</p>
  
  <p>Below you find the code that kind of represents this Vue application. Every 2 seconds some data is pushed that will be added to the HTML by Vue List Rendering.</p>
  
  <p>In this example the current <code>Date()</code> is added to the list every 2 seconds. Also there is a function that maintains the list (<code>maintainList</code>) and takes care that the 5 latest entries are shown.</p>
  
  <p><strong>The wanted animation</strong><br>
  Now I want some animation in this, ultimately what I want:<br>
  The "oldest" item (top one) slides out on top, all items below slide up one place and a new item slides in from the bottom. Or actually, all items slide up and those outside <code>#app</code> will not be shown.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var example1 = new Vue({
    el: '#app',
    data: {
      items: []
    },
    mounted() {
     setInterval(this.add, 2000);
      
      setInterval(this.maintainList, 2000);
      
    },
    methods: {
     add(){
       this.items.push({
         'message': new Date()
        });
      },
      
      maintainList(){
       if(Object.keys(this.items).length &gt;= 6){
         this.items.shift();
        }
      }
    }
  });
  
  example1.add();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
    padding: 15px;
    border: 1px solid black;
    margin-bottom: 15px;
    animation: fadein 1s;
  }
  
  
  @keyframes fadein {
    from {opacity: 0;}
    to   {opacity: 1;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;div v-for="item in items" class="box"&gt;
      {{ item.message }}
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>