<script setup>
import { ref } from 'vue'
const visible = ref(true)
</script>

<template>
  <button @click="visible = !visible">Basculer</button>

  <!-- name="fondu" génère les classes fondu-enter-active, fondu-leave-active, etc. -->
  <Transition name="fondu">
    <p v-if="visible">Ce paragraphe apparaît/disparaît en fondu</p>
  </Transition>
</template>

<style scoped>
/* *-enter-active / *-leave-active : durée et courbe d'animation, appliquées pendant TOUTE la transition */
.fondu-enter-active,
.fondu-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* *-enter-from : état de départ à l'entrée (juste avant que l'élément apparaisse) */
.fondu-enter-from {
  opacity: 0;
  transform: translateY(-8px);
}

/* *-leave-to : état final à la sortie (juste avant que l'élément disparaisse) */
.fondu-leave-to {
  opacity: 0;
  transform: translateY(8px);
}
</style>

<!-- TransitionGroup : anime une LISTE (ajout, suppression, réordonnancement) -->
<script setup>
import { ref } from 'vue'
const taches = ref([
  { id: 1, texte: 'Réviser Vue' },
  { id: 2, texte: 'Écrire les tests' },
])
let prochainId = 3

function ajouter() {
  taches.value.push({ id: prochainId++, texte: `Tâche ${prochainId}` })
}
function retirer(id) {
  taches.value = taches.value.filter((t) => t.id !== id)
}
function melanger() {
  taches.value = [...taches.value].sort(() => Math.random() - 0.5)
}
</script>

<template>
  <button @click="ajouter">Ajouter</button>
  <button @click="melanger">Mélanger</button>

  <!-- tag="ul" : TransitionGroup ne rend PAS de conteneur par défaut, on précise l'élément voulu -->
  <TransitionGroup tag="ul" name="liste" class="liste-taches">
    <li v-for="t in taches" :key="t.id" @click="retirer(t.id)">
      {{ t.texte }}
    </li>
  </TransitionGroup>
</template>

<style scoped>
.liste-enter-active,
.liste-leave-active {
  transition: all 0.4s ease;
}
.liste-enter-from,
.liste-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
/* leave-active en position absolue : nécessaire pour que les voisins glissent PENDANT la sortie */
.liste-leave-active {
  position: absolute;
}
/* move : anime le réordonnancement des éléments restants (ex: après un mélange) */
.liste-move {
  transition: transform 0.4s ease;
}
</style>

<!-- Hooks JS de transition : pour piloter une lib d'animation (GSAP, anime.js...) -->
<script setup>
function surAvantEntree(el) {
  el.style.opacity = 0
}
function surEntree(el, done) {
  // animation JS custom, `done` DOIT être appelé pour signaler la fin de la transition
  const anim = el.animate([{ opacity: 0, transform: 'scale(0.9)' }, { opacity: 1, transform: 'scale(1)' }], {
    duration: 300,
    easing: 'ease-out',
  })
  anim.onfinish = done
}
</script>

<template>
  <Transition @before-enter="surAvantEntree" @enter="surEntree" :css="false">
    <div v-if="true">Contenu animé via l'API Web Animations</div>
  </Transition>
</template>