尝试在两个组上一起使用Vue过渡组

Question

我有一个由两组项目组成的网格，我想与Vue的过渡组建立动画（或者在这种情况下，如果对我来说有更好的选择）。

      <transition-group name="cell" tag="div" class="colors-wrapper">
        <div class="team1">
          <div :class="colors[0].id" :key="colors[0].id" />
          <div :class="colors[1].id" :key="colors[1].id" />
        </div>
        <span class="versus">vs</span>
        <div class="team2">
          <div :class="colors[2].id" :key="colors[2].id" />
          <div :class="colors[3].id" :key="colors[3].id" />
        </div>
      </transition-group>

我希望对team1和team2中的所有4个div进行过渡组动画处理，但是我只能使其与直系子代一起使用。

此功能在此处显示的很好：https://jsfiddle.net/chrisvfritz/sLrhk1bc/

我想要此功能，但要有两个div，每个div中都有一个子div。

我的项目正在（pages / index.vue）上进行测试

https://codesandbox.io/s/p5v7nznjkm