imporve cards animations

app/components/Boxes.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="boxes" :class="{ 'box-selected': uiStore.isBoxSelected }">
-    <button @click="uiStore.closeBox" v-if="uiStore.isBoxSelected"
-      class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
-      aria-label="close the box">
-      close
-    </button>
     <box v-for="(box, i) in dataStore.boxes" :key="box.id" :tabindex="dataStore.boxes.length - i"
       :box="getBoxToDisplay(box)" @click="openBox(box)" class="text-center" :class="box.state" :id="box.id">
       <playButton @click.stop="playSelectedBox(box)" :objectToPlay="box" class="relative z-40 m-auto" />
       <template v-if="box.state === 'box-selected'">
-        <deckCompilation :box="getBoxToDisplay(box)" class="box-page" v-if="box.type === 'compilation'" @click.stop />
+        <deckCompilation :box="getBoxToDisplay(box)" class="box-page" v-if="box.type === 'compilation'"
+          :key="`${box.id}-${box.activeSide}`" @click.stop />
         <deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop />
       </template>
     </box>