vue.js - vue 表转换从底部而不是从顶部发生

Question

我每 5 秒有一个表格和一个来自 websocket 的数据。我使用 unshift() 方法将此数据作为一行添加到表中。现在我应该在 websocket 数据添加到表时添加转换。这是 websocket 数据添加到表中的代码：

getSocketTransactions(val) {
      for (let i = 0; i < 1; i++) {
        this.$store.state.transaction.transactionsList.unshift(val[i]);
}

这些是我使用转换的代码：

<transition-group
          :name="isActive ? 'transactionAnimation' : null"
          tag="tbody"
          class="list-group"
        >
// some code
</transition-group>

问题是数据添加到表的顶部，但转换是从底部发生的。我该如何解决这个问题？

Answer 1

你的transactionAnimation动画是什么样子的？

您可以像这样在过渡 css 中定义动画的方向：

.transactionAnimation-enter-from,
.transactionAnimation-leave-to {
  opacity: 0;
  transform: translateY(-30px); /* -30px for animation from top, 30px for animation from bottom */
}

演示：https ://stackblitz.com/edit/vue-yp85fn