Question

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

下面你会找到代表这个Vue应用程序的代码。每2秒推送一些数据，这些数据将通过Vue List Rendering添加到HTML中。

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

想要的动画
现在我想要一些动画，最终我想要的是：
最老的＆＃34; item（顶部一个）滑出顶部，下面的所有项目向上滑动一个地方，一个新项目从底部滑入。或者实际上，所有项目都会向上滑动，#app以外的项目将不会显示。

＆＃13;

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();

＆＃13;

.box{
  padding: 15px;
  border: 1px solid black;
  margin-bottom: 15px;
  animation: fadein 1s;
}


@keyframes fadein {
  from {opacity: 0;}
  to   {opacity: 1;}
}

＆＃13;

<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>

＆＃13;

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>

Vue使用动画

1 个答案: