I am trying to add animations to a tik tac toe game, where when an item in a list changes such as an X is added or an O is added an animation is played adding it.

This starts out as : list: ["", "", "", "", "", "", "", "", ""]

the code for the board is as follows:

<table>
            <tr>
              <td id="0" v-on:click="addX(0)">{{list[0]}}</td>
              <td id="1" class="vert" v-on:click="addX(1)">{{list[1]}}</td>
              <td id="2" v-on:click="addX(2)">{{list[2]}}</td>
            </tr>
            <tr>
              <td id="3" class="hori" v-on:click="addX(3)">{{list[3]}}</td>
              <td id="4" class="vert hori" v-on:click="addX(4)">{{list[4]}}</td>
              <td id="5" class="hori" v-on:click="addX(5)">{{list[5]}}</td>
            </tr>
            <tr>
              <td id="6" v-on:click="addX(6)">{{list[6]}}</td>
              <td id="7" class="vert" v-on:click="addX(7)">{{list[7]}}</td>
              <td id="8" v-on:click="addX(8)">{{list[8]}}</td>
            </tr>
</table> 

addX(num) is a function that adds an "X" to the num index in the list.

.hori and .vert are just classes to show the lines for the board.

I tried using

<transition-group
           name="custom-classes-transition"
           enter-active-class="animate__animated animate__bounceIn"
           leave-active-class="animate__animated animate__bounceOutRight"
           tag = "td" >

but it didn't work, no animation would play.

Many Thanks,