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

Posted 2023-02-22

【中文标题】Vue将项目添加到带有动画的列表中

【英文标题】：Vue adding items to list with animation

【发布时间】：2018-07-15 05:18:41

【问题描述】：

我已经使用 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>

【参考方案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>

【讨论】：

我不知道Transitions的存在。谢谢！会玩这个。

Vue 将通过此警告 - “避免使用非原始值作为键，而是使用字符串/数字值。”因此使用索引而不是对象v-for="(list, index) in lists" :key="index"

但是索引会发生变化并导致动画出现问题，您可以在对象中添加一个 id 属性以将其用作键。