CSS Transitions with Vue.js and Nuxt.js

Why Transitions Matter

CSS transitions are essential for creating polished, professional web applications that feel responsive and engaging. Vue.js and Nuxt.js provide powerful built-in tools for implementing transitions that enhance user experience without sacrificing performance. Whether you're building a simple modal or a complex multi-page application, mastering transitions will set your applications apart.

In this guide, we'll explore everything from basic fade effects to advanced JavaScript-driven animations, ensuring you have the knowledge to implement the perfect transition for any situation. Our approach focuses on performance-first animations that respect user preferences while creating delightful interaction moments. For a deeper dive into CSS animation techniques, explore our guide on practical CSS Houdini which covers advanced browser animation capabilities.

Understanding Vue.js Transition Component

The <Transition> component is Vue's built-in solution for animating elements as they enter or leave the DOM. Unlike traditional CSS-only animations, Vue's Transition component coordinates precisely with Vue's reactivity system, applying CSS classes at exactly the right moments throughout the animation lifecycle.

When an element within a <Transition> component is inserted or removed, Vue automatically handles the timing and class application, creating seamless effects without manual JavaScript coordination. This integration means transitions work naturally with v-if, v-show, dynamic components, and any Vue feature that changes the DOM structure. The component's design philosophy emphasizes simplicity for common use cases while providing extensibility points for complex animation requirements.

The Six Transition Classes

Vue's transition system uses six distinct CSS classes that correspond to different phases of enter and leave animations:

• v-enter-from: Starting state before insertion (removed after 1 frame)
• v-enter-active: Active state during entire enter phase (removed when animation completes)
• v-enter-to: Ending state after insertion (applied after enter-from is removed)
• v-leave-from: Starting state when leaving (removed after 1 frame)
• v-leave-active: Active state during entire leave phase (removed when animation completes)
• v-leave-to: Ending state when leaving (applied after leave-from is removed)

Named Transitions

Named transitions allow multiple transition effects in the same template by prefixing classes with a custom name:

<Transition name="fade">
 <div v-if="show">Content</div>
</Transition>

This uses fade-enter-active instead of v-enter-active, enabling distinct transitions throughout your application. Named transitions are particularly valuable when building component libraries or applications with diverse UI elements that require distinct animation characteristics.

CSS-Based Transitions in Depth

CSS Transitions vs Animations

CSS transitions smoothly interpolate between states when properties change, defined with the transition property. CSS animations use @keyframes for complex multi-step sequences. Vue's Transition system supports both--you define transitions under .v-enter-active and .v-leave-active classes.

Best for transitions: Hover effects, toggle animations, simple state changes Best for animations: Bouncing effects, sequential movements, looping animations

Timing Functions and Easing

Timing functions determine the rhythm of your animations:

.fade-enter-active {
 transition: opacity 0.3s ease;
}

.slide-enter-active {
 transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-leave-active {
 transition: opacity 0.2s ease-in;
}

Popular easing presets:

• ease (default): Natural start and end with moderate acceleration
• ease-out: Fast start, gentle settle (ideal for entering elements)
• ease-in: Slow start, fast finish (ideal for leaving elements)
• linear: Constant speed throughout
• cubic-bezier(0.4, 0, 0.2, 1): Material Design's standard easing

Multi-Property Transitions

Transition multiple properties with different durations:

.complex-transition {
 transition:
 opacity 0.3s ease,
 transform 0.5s ease,
 background-color 0.2s ease;
}

When transitioning properties with different durations, be aware that Vue considers the transition complete only when all properties finish animating. For complex multi-property animations, consider using the transition-delay property to stagger animations, creating sequences where elements appear to animate in waves rather than all at once.

To learn more advanced CSS animation techniques like masking effects, check out our guide on CSS masking for animations which explores creative ways to add depth to your transitions.

JavaScript Hooks and Advanced Control

For complex animations beyond CSS capabilities, Vue's Transition component provides comprehensive JavaScript hooks.

Transition Hook Methods

<Transition
 @before-enter="onBeforeEnter"
 @enter="onEnter"
 @after-enter="onAfterEnter"
 @enter-cancelled="onEnterCancelled"
 @before-leave="onBeforeLeave"
 @leave="onLeave"
 @after-leave="onAfterLeave"
 @leave-cancelled="onLeaveCancelled"
>
 <div v-if="show">Content</div>
</Transition>

JavaScript Hook Implementation

function onEnter(el, done) {
 // Animation preparation
 gsap.fromTo(el, 
 { opacity: 0, y: 20 },
 { 
 opacity: 1, 
 y: 0,
 duration: 0.3,
 onComplete: done
 }
 );
}

function onLeave(el, done) {
 gsap.to(el, {
 opacity: 0,
 y: -20,
 duration: 0.2,
 onComplete: done
 });
}

Important: Always call done() when the animation completes, or Vue will immediately proceed as if the animation finished. These hooks are particularly valuable for integrating JavaScript animation libraries like GSAP, anime.js, or when you need to animate complex SVG properties that CSS cannot reach.

When using JavaScript hooks, you can optionally disable CSS transitions by setting the css prop to false, which tells Vue to skip CSS class application and rely entirely on your JavaScript-controlled animations.

Nuxt.js Page Transitions

Nuxt.js treats page transitions as a first-class feature with dedicated configuration options.

Configuration in nuxt.config.ts

export default defineNuxtConfig({
 app: {
 pageTransition: { name: 'page', mode: 'out-in' }
 }
})

Page-Specific Transitions

Override the global configuration for individual pages:

<script setup>
definePageMeta({
 pageTransition: { name: 'modal', mode: 'in-out' }
})
</script>

Transition Modes

• out-in: Old page leaves before new page enters (recommended for pages)
• in-out: New page enters before old page leaves
• default (undefined): Both pages animate simultaneously

View Transitions API

Nuxt supports the experimental View Transitions API:

export default defineNuxtConfig({
 experimental: {
 viewTransition: true
 }
})

This enables native browser page transitions with hardware-accelerated performance. The View Transitions API works by capturing the current state of the page, capturing the new state after navigation, and then animating the differences using the browser's optimized rendering pipeline. As browser support matures, View Transitions are likely to become the recommended approach for page transitions.

For page-specific transitions, Nuxt supports the definePageMeta macro within individual page components, allowing you to override the global transition settings on a per-page basis--some pages might use a simple fade while others employ elaborate slide or scale transitions.

If you're exploring modern JavaScript frameworks, our guide on getting started with Next.js provides a comprehensive introduction to another leading framework with its own transition capabilities.

Performance Optimization

Best Practices for Smooth Animations

Optimize for GPU-accelerated properties:

• Animate transform and opacity only
• Avoid animating width, height, margin, padding, or position properties

Use will-change judiciously:

.animated-element {
 will-change: transform, opacity;
}

Recommended durations:

• Simple fades: 200-300ms
• Standard transitions: 300-500ms
• Complex animations: 500-700ms

The most impactful optimization is limiting animations to transform and opacity properties, which can be handled entirely by the GPU and do not trigger layout recalculations or repaints. Duration also impacts perceived performance--animations between 200-500 milliseconds feel responsive without feeling rushed.

Accessibility Considerations

Respect user preferences with prefers-reduced-motion:

@media (prefers-reduced-motion: no-preference) {
 .fade-enter-active {
 transition: opacity 0.3s ease;
 }
}

@media (prefers-reduced-motion: reduce) {
 .fade-enter-active {
 transition: none;
 }
}

Users with vestibular disorders, certain neurological conditions, or motion sensitivity may have configured their operating system to reduce or eliminate motion effects. Testing with reduced motion enabled should be part of your standard quality assurance process for any application with significant animation.

For teams building performant Vue and Nuxt applications, our web development services can help you implement polished animations while maintaining excellent performance across all devices.

Common Transition Patterns

Fade Transition

.fade-enter-active,
.fade-leave-active {
 transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
 opacity: 0;
}

Slide Transition

.slide-enter-active {
 transition: all 0.3s ease-out;
}

.slide-leave-active {
 transition: all 0.2s ease-in;
}

.slide-enter-from {
 opacity: 0;
 transform: translateX(30px);
}

.slide-leave-to {
 opacity: 0;
 transform: translateX(-30px);
}

Scale Transition

.scale-enter-active {
 transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scale-leave-active {
 transition: all 0.2s ease;
}

.scale-enter-from {
 opacity: 0;
 transform: scale(0.5);
}

.scale-leave-to {
 opacity: 0;
 transform: scale(0.8);
}

Combining patterns creates richer experiences: fade-slide combines the smoothness of opacity changes with directional movement; scale-fade creates a sense of elements emerging from or dissolving into nothingness. When implementing these patterns, consistency is key--use the same transitions throughout your application for similar interactions so users develop intuitive expectations about how the interface will behave.

Sources

1. Vue.js: Transition Component - Official Vue.js documentation covering the built-in Transition component, CSS classes, and JavaScript hooks
2. Nuxt.js: Transitions Documentation - Official Nuxt documentation for page transitions and view transitions API configuration
3. Vue.js: TransitionGroup Component - Documentation for list transitions with v-for