Vue将项目添加到带有动画的列表中

Question

我已经使用 socket.io 创建了一个显示实时信息的 Vue 应用程序。现在我想要一些漂亮的动画，但我不知道如何使用 Vue 来做到这一点。

您可以在下面找到代表这个 Vue 应用程序的代码。每 2 秒推送一些数据，这些数据将通过 Vue 列表渲染添加到 HTML。

在此示例中，当前Date() 每 2 秒添加到列表中。还有一个函数可以维护列表 (maintainList) 并注意显示 5 个最新条目。

想要的动画
现在我想要一些动画，最终是我想要的：
“最旧”的项目（最上面的）从顶部滑出，下面的所有项目都向上滑动一个位置，一个新项目从底部滑入。或者实际上，所有项目都向上滑动，#app 之外的项目不会显示。

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 >= 6){
      	this.items.shift();
      }
    }
  }
});

example1.add();

.box{
  padding: 15px;
  border: 1px solid black;
  margin-bottom: 15px;
  animation: fadein 1s;
}


@keyframes fadein {
  from {opacity: 0;}
  to   {opacity: 1;}
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

<div id="app">
  <div v-for="item in items" class="box">
    {{ item.message }}
  </div>
</div>

Answer 1

查看Transitions，具体是List Entering/Leaving Transitions，这里是一个使用示例

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()
      });
      setTimeout(this.maintainList, 1000);
    },
    
    maintainList(){
    	if(Object.keys(this.items).length >= 4){
      	this.items.splice(0,1);
      }
    }
  }
});

.box{
  padding: 15px;
  border: 1px solid black;
  margin-bottom: 15px;
}

.fade-enter {
  opacity:0;
}

.fade-enter-active{
  animation: fadein 1s;
}

.fade-leave {
  opacity:1;
}

.fade-leave-active {
  animation: fadein 1s reverse;
}


@keyframes fadein {
  from {opacity: 0;}
  to   {opacity: 1;}
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

<div id="app">
  <div>
    <button @click="add">Add new Item</button>
  </div>
  <transition-group name="fade" mode="out-in">
    <div   v-for="item in items" class="box" :key="item">
      {{ item.message }}
    </div>
  </transition-group>
  
</div>