0

my aim is to create a table from data of a JSON file. As the table features live data I want to implement transitions whenever the ranking changes. However, even though the data is reloaded after changings I do not manage to use transitions.

This is the JSON file:

{"table": [["Player1",1],["Player1",2],["Player1",3]]}

And here is a minimal version of the Vue code:

<template>
<div id="flip-list-demo" class="demo">
  <transition-group name="flip-list">
    <div class="table-entry" v-for="(rank,index) in playernum" v-bind:key="index">
      <div class="name"> {{ players[index][0] }} </div>
      <div class="rank"> {{ players[index][1] }} </div>
    </div>
  </transition-group>
</div>
</template>

<script>
import game_data from './assets/game_data.json'

export default {
  name: 'App',
  data() {
    return {
      data: game_data,
      players: Object(game_data.table),
      playernum: Object.keys(game_data.table).length,
    };
  },
};
</script>

<style>

.flip-list-move {
  transition: transform 1s;
}

#flip-list-demo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
}

</style>
mathbreaker
  • 28
  • 8
  • `.flip-list-move` by itself isn't enough animation information. You need enter/leave classes too. Try starting with the example CSS in the [docs](https://vuejs.org/guide/built-ins/transition-group.html#move-transitions) then modifying it to meet your needs. – yoduh Mar 12 '23 at 01:54

0 Answers0