platine transition

app/layouts/default.vue

@@ -1,12 +1,14 @@
 <template>
   <slot />
   <Bucket />
-  <Platine />
+  <Platine v-if="playerStore.currentTrack" />
 </template>
 
 <script setup lang="ts">
 import type { Track } from '~~/types/types'
+import { usePlayerStore } from '~/store/player'
 
+const playerStore = usePlayerStore()
 const onCardDropped = (card: Track) => {
   console.log('Carte déposée dans le bucket:', card)
 }
@@ -16,16 +18,17 @@ const onCardDropped = (card: Track) => {
 .bucket,
 .platine {
   position: fixed;
-  bottom: 0;
+  bottom: -100%;
   right: 0;
+  height: auto;
 }
 
 .bucket {
   z-index: 70;
   bottom: -260px;
-  transition: bottom 0.3s ease;
   width: 100%;
   overflow-x: scroll;
+  transition: bottom .3s ease;
 
   &:hover,
   .card-dragging & {
@@ -38,9 +41,13 @@ const onCardDropped = (card: Track) => {
 }
 
 .platine {
-  z-index: 60;
-  bottom: -70%;
-  transition: bottom 0.3s ease;
-  /* width: 25%; */
+  bottom: -100%;
+  transition: bottom 2s ease;
+
+  &.mounted {
+    z-index: 60;
+    bottom: 0;
+    width: 25%;
+  }
 }
 </style>