Vue Transition: Declarative Enter and Leave Animations in Vue 3
The native Vue Transition component is a cornerstone of Vue component architecture, yet implementing seamless enter and leave animations in modern applications often exposes severe rendering limitations. Traditional CSS-based transition classes trigger layout thrashing and repaint bottlenecks when dealing with complex DOM hierarchies or dynamic data visualizations. ExodeUI connects Vue 3 reactive transition states directly to a hardware-accelerated WebGL canvas runtime. By pairing Vue transition hooks with native GPU playheads and spring dynamics, ExodeUI enables butter-smooth 120fps state changes, unmount transitions, and cross-fades without layout jumps, memory leaks, or brittle CSS timing calculations.
ExodeUI for Vue connects Vue 3 reactive ref and computed primitives directly to GPU uniform registers and state machines, eliminating Virtual DOM recalculation overhead and guaranteeing consistent 120fps motion.
Runnable ExodeUI Vue 3 Code Example
Vue 3 SFC Composition APIImport the ExodeUICanvas component and bind reactive parameters declaratively without imperative DOM lifecycle hooks:
<template>
<div class="transition-container">
<button @click="isVisible = !isVisible" class="toggle-btn">
{{ isVisible ? 'Dismiss Element' : 'Mount Element' }}
</button>
<Transition
name="exode-fade"
@enter="onEnter"
@leave="onLeave"
:css="false"
>
<div v-if="isVisible" class="canvas-wrapper">
<ExodeUICanvas
ref="canvasRef"
src="/scenes/vue-transition-card.json"
:inputs="{ opacity: currentOpacity, scale: currentScale }"
/>
</div>
</Transition>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ExodeUICanvas } from 'exodeui-vue';
const isVisible = ref(true);
const currentOpacity = ref(1);
const currentScale = ref(1);
const canvasRef = ref(null);
const onEnter = (el, done) => {
currentOpacity.value = 0;
currentScale.value = 0.85;
// Spring transition to active state
requestAnimationFrame(() => {
currentOpacity.value = 1;
currentScale.value = 1;
setTimeout(done, 350);
});
};
const onLeave = (el, done) => {
currentOpacity.value = 0;
currentScale.value = 0.9;
setTimeout(done, 250);
};
</script>
<style scoped>
.transition-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.canvas-wrapper {
width: 320px;
height: 240px;
}
</style>Frequently Asked Questions about vue transition
How does ExodeUI Vue transition differ from default Vue CSS transitions?
Default Vue CSS transitions animate DOM elements using stylesheets which can trigger expensive browser reflows. ExodeUI pipes transition state into a WebGL shader pipeline, allowing morphs, springs, and vector transforms to run off the main thread.
Does ExodeUI support Vue 3 Transition mode="out-in"?
Yes. ExodeUI integrates seamlessly with standard Vue 3 Transition modes, coordinating smooth exit animations before mounting incoming components.
Can I combine Vue Transition with physics-based springs?
Yes. ExodeUI includes built-in spring dynamics that automatically compute velocity and damping during enter and leave transitions, eliminating robotic static cubic-bezier curves.