x-transition

Alpine fournit nativement un puissant utilitaire de transitions. Avec quelques directives x-transition, vous pouvez créer des transitions fluides lorsqu'un élément est affiché ou masqué.

Il existe deux grandes façons de gérer les transitions dans Alpine :

• L'assistant de transition
• L'application de classes CSS

L'assistant de transition

La façon la plus simple d'obtenir une transition avec Alpine consiste à ajouter x-transition à un élément qui porte x-show. Par exemple :

<div x-data="{ open: false }">
    <button @click="open = ! open">Afficher/masquer</button>

    <div x-show="open" x-transition>
        Bonjour 👋
    </div>
</div>

Comme vous pouvez le voir, par défaut, x-transition applique des réglages agréables qui font apparaître l'élément en fondu avec un effet d'échelle.

Vous pouvez remplacer ces valeurs par défaut grâce à des modificateurs attachés à x-transition. Voyons-les.

Personnaliser la durée

Au départ, la durée est fixée à 150 millisecondes à l'entrée et à 75 millisecondes à la sortie.

Vous pouvez configurer la durée souhaitée d'une transition avec le modificateur .duration :

<div ... x-transition.duration.500ms>

La <div> ci-dessus fera une transition de 500 millisecondes à l'entrée, et de 500 millisecondes à la sortie.

Si vous souhaitez personnaliser les durées spécifiquement pour l'entrée et la sortie, vous pouvez le faire ainsi :

<div ...
    x-transition:enter.duration.500ms
    x-transition:leave.duration.400ms
>

Remarque : bien que cela ne figure pas dans l'extrait ci-dessus, x-transition ne peut pas être utilisé si aucun élément parent ne définit x-data. → En savoir plus sur x-data

Personnaliser le délai

Vous pouvez retarder une transition grâce au modificateur .delay, comme ceci :

<div ... x-transition.delay.50ms>

L'exemple ci-dessus retardera de 50 millisecondes la transition d'entrée et de sortie de l'élément.

Personnaliser l'opacité

Par défaut, x-transition d'Alpine applique à la fois une transition d'échelle et d'opacité pour obtenir un effet de « fondu ».

Si vous souhaitez n'appliquer que la transition d'opacité (sans échelle), vous pouvez le faire ainsi :

<div ... x-transition.opacity>

Personnaliser l'échelle

À l'image du modificateur .opacity, vous pouvez configurer x-transition pour appliquer UNIQUEMENT l'échelle (sans transition d'opacité) comme ceci :

<div ... x-transition.scale>

Le modificateur .scale permet aussi de configurer ses valeurs d'échelle ET ses valeurs d'origine :

<div ... x-transition.scale.80>

L'extrait ci-dessus agrandira et réduira l'élément à 80 %.

Là encore, vous pouvez personnaliser ces valeurs séparément pour les transitions d'entrée et de sortie, comme ceci :

<div ...
    x-transition:enter.scale.80
    x-transition:leave.scale.90
>

Pour personnaliser l'origine de la transition d'échelle, vous pouvez utiliser le modificateur .origin :

<div ... x-transition.scale.origin.top>

L'échelle sera désormais appliquée en prenant le haut de l'élément comme origine, au lieu du centre par défaut.

Comme vous l'aurez deviné, les valeurs possibles pour cette personnalisation sont : top, bottom, left et right.

Si vous le souhaitez, vous pouvez aussi combiner deux valeurs d'origine. Par exemple, si vous voulez que l'origine de l'échelle soit « en haut à droite », vous pouvez utiliser .origin.top.right comme modificateur.

Application de classes CSS

Pour contrôler précisément le contenu de vos transitions, vous pouvez appliquer des classes CSS à différentes étapes de la transition.

Remarque : les exemples suivants utilisent les classes utilitaires de TailwindCSS.

<div x-data="{ open: false }">
    <button @click="open = ! open">Afficher/masquer</button>

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"
    >Bonjour 👋</div>
</div>

Traduction française de la documentation officielle d'Alpine.js (licence MIT) – https://alpinejs.dev