x-transition - Animations in Alpine.js
From the Alpine.js cheat sheet · Advanced Features · verified Jul 2026
x-transition - Animations
Add smooth transitions when elements appear/disappear
html
<div x-data="{ open: false }">
<button @click="open = !open">Toggle</button>
<div x-show="open" x-transition>
Animated content
</div>
</div>✅ Works seamlessly with x-show and x-if
💡 Default transition is a simple fade
🔍 Modifiers: .opacity, .scale, .duration.XXXms
⚡ Use detailed classes for complete control over animation
x-transitionanimationstransitionseffects