Effetti e transizioni avanzate in Alpine.js

Alpine permette di applicare transizioni CSS agli elementi che cambiano stato quando questi vengono mostrati o nascosti con le proprietà x-show e x-if.

Ci sono due modi per applicare transizioni in Alpine. Il primo è attraverso il transition helper fornito dalla direttiva x-transition; il secondo è applicando le proprietà CSS o le utility di TailwindCSS.

La direttiva x-transition di Alpine

x-transition applica in modo interattivo le proprietà CSS animabili agli elementi che cambiano stato, ad esempio quando vendono mostrati o nascosti. Ecco un semplice esempio:

<div x-data="{ show: false, toggle() { this.show = ! this.show } }">
	<button @click="toggle()">Toggle</button>
	<div x-show="show" x-transition.duration.500ms>
		Hello 👋
	</div>
</div>

Al clic sul pulsante, la proprietà show passa da false a true e viceversa, mostrando o nascondendo il testo contenuto nella div e attivando una transizione di durata 500ms.

duration è un modificatore che permette di personalizzare la durata della transizione. Altri modificatori della direttiva x-transition sono:

• delay: permette di impostare un ritardo nell'esecuzione della transizione;
• opacity: genera un effetto dissolvenza applicando sia una transizione di scala che di opacità;
• scale: modifica le dimensioni dell'elemento ma non l'opacità. Il comportamento di scale può essere controllato aggiungendo un valore in centesimi che rappresenta la scala desiderata oppure in combinazione con i modificatori enter, leave, origin.

Nell'esempio che segue utilizziamo x-transition con il modificatore opacity:

<div x-data="{ show: false, toggle() { this.show = !this.show } }">
	<button @click="toggle()">Toggle</button>
	<div
		x-show="show"
		x-transition.opacity.duration.500ms
	>
		Hello 👋
	</div>
</div>

In quest'altro esempio vediamo, invece, come funziona il modificatore scale in combinazione con i valori desiderati di scala e durata della transizione:

<div x-data="{ show: false, toggle() { this.show = !this.show } }">
	<button @click="toggle()">Toggle</button>
	<div
		x-show="show"
		x-transition:enter.scale.10.duration.600ms
		x-transition:leave.scale.50.duration.600ms
		style="font-size: 2rem;"
	>
		Hello 👋
	</div>
</div>

In questo esempio abbiamo creato due diverse transizioni, la prima in entrata (da 0,10 a 1), la seconda in uscita (da 1 a 0,50), entrambe della durata di 600ms. Le immagini che seguono mostrano le fasi dell'animazione in entrata:

Le transizioni di Alpine con le classi CSS

Se si desidera avere un controllo granulare sulle transizioni, si può utilizzare la direttiva x-transition in combinazione con proprietà o classi CSS.

Nell'esempio che segue, creiamo una card animata in puro CSS che appare e scompare interattivamente al clic su un pulsante. Per prima cosa, creiamo il markup del componente Alpine:

<div x-data="{ isOpen: false }">
	<button @click="isOpen = !isOpen">
		Toggle Card
	</button>
	<div
		x-show="isOpen"
		x-transition:enter="enter-transition"
		x-transition:enter-start="enter-start"
		x-transition:enter-end="enter-end"
		x-transition:leave="leave-transition"
		x-transition:leave-start="leave-start"
		x-transition:leave-end="leave-end"
		class="card"
	>
		<h2>Benvenuto!</h2>
		<p>Questa è una card interattiva.</p>
	</div>
</div>

• x-transition:enter applica la classe enter-transition per tutta la durata della transizione in entrata.
• x-transition:enter-start applica la classe enter-start all'avvio della transizione in entrata.
• x-transition:enter-end applica la classe enter-end alla conclusione della transizione in entrata, cioè quando l'elemento è stato visualizzato nella sua posizione finale.
• :leave, :leave-start e :leave-end si comportano in modo simmetrico alle precedenti direttive.

Passiamo, quindi, alle dichiarazioni CSS:

<style>
	/* Stili base per la card */
	.card {
		background-color: #f9fafb;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		padding: 1rem;
		max-width: 300px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	/* Transizione di entrata */
	.enter-transition {
		transition-property: opacity, transform;
		transition-duration: 600ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Easing personalizzato */
	}
	.enter-start {
		opacity: 0;
		transform: translateY(20px) scale(0.95); /* Parte 20px sotto leggermente rimpicciolita */
	}
	.enter-end {
		opacity: 1;
		transform: translateY(0) scale(1); /* Stato finale: visibile e in posizione */
	}
	/* Transizione di uscita */
	.leave-transition {
		transition-property: opacity, transform;
		transition-duration: 400ms;
		transition-timing-function: ease-in;
	}
	.leave-start {
		opacity: 1;
		transform: scale(1); /* Stato iniziale: visibile */
	}
	.leave-end {
		opacity: 0;
		transform: scale(0.9) translateY(-10px); /* Scompare riducendo le dimensioni e salendo di 10px */
	}
</style>

I blocchi di dichiarazioni determinano le caratteristiche delle transizioni in entrata e in uscita della scheda. Qui non entriamo nel dettaglio delle transizioni CSS, facendo rinvio alla documentazione online.

Le immagini che seguono mostrano la sequenza della transizione in entrata con l'assegnazione delle classi per ognuna delle fasi.

Infine, possiamo replicare lo stesso esempio utilizzando le classi di utilità di Tailwind CSS. Ecco il codice completo da copiare e incollare nel proprio editor:

<!DOCTYPE html>
<html>
<head>
	<!-- Carica Tailwind CSS -->
	<script src="https://cdn.tailwindcss.com"></script>
	<!-- Carica Alpine.js -->
	<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="p-4">
	<div x-data="{ isOpen: false }">
		<!-- Pulsante con classi Tailwind -->
		<button
			@click="isOpen = !isOpen"
			class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
		>
			Toggle Card
		</button>
		<div
			x-show="isOpen"
			x-transition:enter="transition duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
			x-transition:enter-start="opacity-0 translate-y-5 scale-95"
			x-transition:enter-end="opacity-100 translate-y-0 scale-100"
			x-transition:leave="transition duration-400 ease-in"
			x-transition:leave-start="opacity-100 scale-100"
			x-transition:leave-end="opacity-0 scale-90 -translate-y-2"
			class="mt-4 bg-gray-50 border border-gray-200 rounded-lg p-4 max-w-xs shadow-md"
		>
			<h2 class="text-lg font-bold">Benvenuto!</h2>
			<p>Questa è una card interattiva.</p>
		</div>
	</div>
</body>
</html>

Conclusioni

Concludiamo qui la nostra guida introduttiva alla libreria Alpine.js. Ne abbiamo analizzato le principali funzionalità, esplorando alcuni tra i più comuni casi d'uso con dei semplici esempi pratici. Per chi volesse esplorare argomenti più avanzati, come reattività ed estendibilità, facciamo ampio rinvio alla documentazione online e a risorse come Alpine Toolbox.