v-transition
Enable smooth View Transitions API animations for DOM updates.
Basic Usage
Mark elements that should animate when their content changes.
<!-- Auto-generated transition name -->
<div v-transition>
{{ content }}
</div>
<!-- Custom transition name -->
<div v-transition="'wizard-step'">
Step {{ currentStep }} content
</div>
<!-- Skip this element from transitions -->
<div v-transition.skip>
Static content
</div>Custom Animations
Style transitions with CSS using the ::view-transition-* pseudo-elements.
CSS
/* Animate the old content leaving */
::view-transition-old(wizard-step) {
animation: slide-out-left 0.25s ease-out;
}
/* Animate the new content entering */
::view-transition-new(wizard-step) {
animation: slide-in-right 0.25s ease-in;
}
@keyframes slide-out-left {
to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slide-in-right {
from { transform: translateX(100%); opacity: 0; }
}Common Use Cases
Wizard Steps
Slide between multi-step form steps.
Tab Content
Fade or slide when switching tabs.
Modal Transitions
Scale or fade modals in/out.
Image Galleries
Crossfade between images.
Browser Support
| Browser | Version |
|---|---|
| Chrome / Edge | 111+ |
| Safari | 18+ |
| Firefox | 144+ (basic support) |
On unsupported browsers, the transition is skipped and content updates instantly. The directive also respects prefers-reduced-motion.
Server-Side: #[Transition]
You can also configure transitions per method using the PHP attribute.
use LiVue\Attributes\Transition;
#[Transition(type: 'slide')]
public function nextStep()
{
$this->step++;
}
#[Transition(skip: true)]
public function quickUpdate()
{
// No transition for this method
}