Multiple different animations within a single <TransitionGroup>

[TroysProgramming]

Either I'm missing something, or there may not be a way to support this as of yet. Take the following code:

<template>
    <TransitionGroup :name="currentAnimState">
      <div :key="index" v-for="(button, index) in buttons">
        <MenuButton :text="button.text" @click="onButtonClicked(index);" />
      </div>
    </TransitionGroup>
</template>

For each MenuButton that is rendered in the TransitionGroup, they all have to conform to the animation named after the name attribute in the TransitionGroup. Each separate item cannot have a transition animation that is different from the one named in the group. But what if you wanted one element to have a different animation behaviour? An example in this case would be clicking on one of the buttons, and that button would play a different exit animation compared to the rest of the unclicked buttons in the list.

The only other way I can think of achieving this is to create a Transition inside each child of the v-for tagged element, and change the name in the one transition for the element you want to have a different animation for. I haven't tried this yet, and I'm not sure if I'd like code to be refactored in this way, because it doesn't seem as practical and easy to code as having them all in the TransitionGroup, and the list also can't take advantage of TransitionGroup's utilities (such as move animations).

Please let me know if you have any questions, or if there's a better way to achieve this without any modification to the current Transition system.