VuReact compiles Vue 3
<Transition>into maintainable React code. Its core value lies in preserving enter/leave animation semantics, reducing migration cost, and supporting both CSS class conventions and JavaScript hooks. It is particularly useful for teams migrating animation-heavy interfaces from Vue to React. Keywords: VuReact, Vue Transition, React transition animations.
The technical specification snapshot highlights the core compilation model
| Parameter | Description |
|---|---|
| Core languages | Vue 3, React, TypeScript/JavaScript |
| Compilation target | Convert Vue template semantics into React component patterns |
| Transition protocol | CSS Transition / JavaScript Hook |
| Runtime dependency | @vureact/runtime-core |
| Core component | Transition |
| Output code shape | Conditional rendering, prop mapping, hook passthrough |
| GitHub | vureact-js/core |
| Best-fit scenarios | Vue-to-React migration, animation semantic preservation |
VuReact handles Transition through semantic equivalence mapping
VuReact does not crudely rewrite Vue’s `
` into manual DOM animation code. Instead, it maps it directly to a React-side `Transition` adapter component provided by the runtime. The key advantage is that the migrated code remains componentized, maintainable, and composable. From the result perspective, developers do not see that “the animation was rewritten.” They see that “the semantics were transferred.” Vue’s conventions around enter, leave, timing, and class names are handed off intact to the React runtime. “`tsx import { Transition } from ‘@vureact/runtime-core’ export function Demo({ show }: { show: boolean }) { return ( {show ?Content
: null} {/* Conditional rendering maps Vue’s v-if */}
)
}
“`
This snippet demonstrates VuReact’s core strategy: convert template-based transition semantics into explicit component composition in React.
### Basic single-element transitions are mapped directly to React component calls
In Vue, the most common pattern uses `name` to define a transition prefix, while CSS provides `*-enter-*` and `*-leave-*` classes. VuReact preserves this mechanism, which keeps migration cost very low.
When the original Vue code contains only one direct child node, the compiled output typically just converts `v-if` into a ternary expression and replaces `
` with the runtime component.
“`css
.fade-enter-from,
.fade-leave-to {
opacity: 0; /* Initial and exit transparency */
}
.fade-enter-active {
opacity: 1;
transition: opacity 0.5s ease; /* Transition during the enter phase */
}
.fade-leave-active {
opacity: 0;
transition: opacity 0.5s ease; /* Transition during the leave phase */
}
“`
This stylesheet shows that VuReact does not alter Vue’s CSS class name semantics, so the original animation design can be reused as-is.
## Transition mode control is preserved completely in the React runtime
Vue’s `mode` controls the switching order between old and new nodes, with common values such as `out-in` and `in-out`. VuReact passes this prop through unchanged to the React-side `Transition` component.
That means you can still precisely control whether the old node leaves before the new one enters, or the reverse, avoiding situations where both nodes compete for visual focus at the same time.
“`tsx
{state ? (
/* Use stable keys to distinguish nodes */
) : (
)}
“`
The key point in this snippet is not the JSX syntax. It is that `key` and `mode` together determine transition triggering and node identity.
### Stable keys are critical for correct transition triggering
When two branches render the same tag, React may reuse the node. Without a stable `key`, the transition system may not recognize that this is an actual element switch. For button, panel, or card-switching scenarios, explicitly providing a `key` is important.
Based on the source material, if no `key` is provided, VuReact may also apply automatic identity compensation to improve transition usability. Even so, in production code, developers should still provide stable keys proactively.
## Custom class support keeps third-party animation libraries usable
In addition to the `name` pattern, Vue also allows properties such as `enter-active-class` and `leave-active-class` to integrate external animation libraries like Animate.css. VuReact converts these kebab-case props into React-style camelCase prop names.
This is a highly important compilation strategy because it preserves ecosystem compatibility instead of forcing you to rewrite your animation system.
“`tsx
{show ?
Custom animation
: null} {/* Preserve the single-child structure */}
“`
This snippet shows that VuReact handles not only structural transformation, but also cross-framework prop naming conversion.
### JavaScript hooks are also mapped to React-style event props
Vue hooks such as `@before-enter`, `@enter`, `@after-enter`, and `@leave` are essentially transition lifecycle callbacks. VuReact compiles them into React props such as `onBeforeEnter`, `onEnter`, `onAfterEnter`, and `onLeave`.
As a result, logic that depends on hooks for analytics, measurement, manual frame adjustment, or third-party library coordination does not need to be redesigned.
“`tsx
{show ?
JS-controlled animation
: null} {/* Hooks participate in the full lifecycle */}
The purpose of this snippet is to migrate Vue transition lifecycle hooks into the React runtime interface without loss.
## Preserving the duration prop improves animation timing precision
In complex interfaces, the actual CSS duration and the component's expected duration may not always match. Vue provides the `duration` prop to explicitly declare animation timing, and VuReact supports a direct mapping for this configuration as well.
It supports both a single numeric value for a unified duration and an object form for separate `enter` and `leave` timings. This makes timing more stable in asynchronous rendering, sequential animations, or multi-step interactions.
```tsx
<Transition duration={800}>
{show ?
<div>Animation with explicit duration</div> : null} {/* Unified enter and leave duration */}
</Transition>
<Transition duration={{ enter: 300, leave: 500 }}>
{show ?
<div>Content</div> : null} {/* Control timing for each phase separately */}
</Transition>This example demonstrates VuReact’s support for both duration configuration formats, which is useful for scenarios that require fine-grained control over animation rhythm.
The migration takeaway is that animation semantics are preserved, not replaced
Overall, VuReact’s handling of `
` can be summarized in four points: direct component mapping, full prop passthrough, continued CSS class semantics, and preserved lifecycle hooks. The real problem it solves is not “how to manually recreate a Vue animation in React,” but rather “how to migrate Vue animation capabilities into React with minimal loss.” For teams performing a gradual migration from Vue 3 to React, this approach significantly reduces the cost of refactoring the animation layer. It is especially well suited to projects that already contain extensive transition effects, style conventions, and business logic bound to hooks. ## Related resources help validate runtime behavior in more detail – VuReact official documentation: – VuReact Runtime Transition: – GitHub: ## FAQ answers the most common migration questions ### Do I still need to write CSS for Transition after VuReact compiles it? Yes. VuReact preserves Vue’s transition semantics and class name conventions, but it does not automatically generate complete animation styles. You still need to provide CSS rules such as `*-enter-active` and `*-leave-active`. ### Why is it recommended to provide an explicit key when switching elements? Because the transition system needs to distinguish between “an update to the same node” and “a switch between two nodes.” A stable `key` allows both React and `Transition` to identify node identity clearly, which ensures that enter and leave animations trigger correctly. ### Can VuReact work with third-party animation libraries like Animate.css? Yes. You can pass third-party class names directly through props such as `enterActiveClass` and `leaveActiveClass`, and VuReact will map Vue-style prop semantics to React-style prop naming. Core summary: This article systematically breaks down VuReact’s compilation strategy for the Vue 3 `Transition` component, covering basic transitions, `mode`, custom class names, JavaScript hooks, and `duration` mapping. It shows how VuReact preserves Vue’s animation semantics and maintainability inside React.