DEV Community

Cover image for Vue Transition component to React: How does VuReact handle it?
Ryan John
Ryan John

Posted on • Originally published at vureact.top

Vue Transition component to React: How does VuReact handle it?

#javascript #webdev #vue #react

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's built-in <Transition> component is compiled into React code by VuReact.

Before We Start

To keep the examples easy to read, this article follows two simple conventions:

  1. All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
  2. The discussion assumes you are already familiar with Vue 3's <Transition> component usage.

Compilation Mapping

Transition: Single element transition animation

<Transition> is Vue's built-in component for adding enter/leave transition animations to a single element or component.

Basic Transition usage

  • Vue 
<template>
  <Transition name="fade">
    <div v-if="show">Content</div>
  </Transition>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
import { Transition } from '@vureact/runtime-core';

<Transition name="fade">
  {show ? <div>Content</div> : null}
</Transition>
Enter fullscreen mode Exit fullscreen mode

As the example shows, Vue's <Transition> component is compiled into the Transition adapter component provided by VuReact Runtime — think of it as "Vue's Transition for React".

The key characteristics of this compilation approach are:

  1. Semantic consistency: Fully simulates Vue <Transition> behavior by implementing transition animations
  2. CSS class names: Automatically generates and applies transition-related CSS class names
  3. Conditional rendering: Supports transition effects for conditionally rendered elements
  4. React integration: Implements Vue's transition semantics in the React environment

Corresponding CSS styles:

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

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

.fade-leave-active {
  opacity: 0;
  transition: opacity 0.5s ease;
}
Enter fullscreen mode Exit fullscreen mode

Transition mode control

The mode attribute controls the order of新旧 content switching, preventing enter and leave animations from running simultaneously.

  • Vue 
<template>
  <Transition name="slide-fade" mode="out-in">
    <button v-if="state" key="on">On</button>
    <button v-else key="off">Off</button>
  </Transition>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<Transition name="slide-fade" mode="out-in">
  {state ? <button key="on">On</button> : <button key="off">Off</button>}
</Transition>
Enter fullscreen mode Exit fullscreen mode

Transition modes:

  1. out-in: The leave animation finishes first, then the enter animation plays
  2. in-out: The enter animation finishes first, then the leave animation plays
  3. Default: Enter and leave animations play simultaneously

The importance of key:

  1. Node identification: Helps Transition identify different elements
  2. Animation trigger: A change in key triggers the transition animation
  3. State preservation: Ensures animations are correctly applied to the corresponding element
  4. Automatic multi-node key handling: When no explicit key is provided, VuReact automatically generates a random identifier to ensure proper transition animation triggering

Custom transition class names

Beyond using name to auto-generate class names, you can also directly specify custom transition class names for easy integration with third-party animation libraries.

  • Vue 
<template>
  <Transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <div v-if="show">Custom animation</div>
  </Transition>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<Transition
  enterActiveClass="animate__animated animate__fadeIn"
  leaveActiveClass="animate__animated animate__fadeOut"
>
  {show ? <div>Custom animation</div> : null}
</Transition>
Enter fullscreen mode Exit fullscreen mode

Custom class name attributes:

  1. enterFromClass: Class name at the start of enter
  2. enterActiveClass: Class name during the active enter phase
  3. enterToClass: Class name at the end of enter
  4. leaveFromClass: Class name at the start of leave
  5. leaveActiveClass: Class name during the active leave phase
  6. leaveToClass: Class name at the end of leave

JavaScript hook functions

Transition supports JavaScript hook functions for executing custom logic at different stages of the animation.

  • Vue 
<template>
  <Transition
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @after-enter="onAfterEnter"
    @leave="onLeave"
  >
    <div v-if="show">JS controlled animation</div>
  </Transition>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<Transition
  onBeforeEnter={onBeforeEnter}
  onEnter={onEnter}
  onAfterEnter={onAfterEnter}
  onLeave={onLeave}
>
  {show ? <div>JS controlled animation</div> : null}
</Transition>
Enter fullscreen mode Exit fullscreen mode

JavaScript hooks:

  1. onBeforeEnter: Triggered before the enter animation starts
  2. onEnter: Triggered during the enter animation
  3. onAfterEnter: Triggered after the enter animation completes
  4. onLeave: Triggered during the leave animation
  5. onAfterLeave: Triggered after the leave animation completes

Transition duration control

The duration attribute explicitly specifies the transition duration.

  • Vue 
<template>
  <Transition :duration="800">
    <div v-if="show">Specified duration animation</div>
  </Transition>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<Transition duration={800}>
  {show ? <div>Specified duration animation</div> : null}
</Transition>
Enter fullscreen mode Exit fullscreen mode

Duration configuration:

  • Number: Sets a uniform duration for both enter and leave
  • Object: Sets separate durations for enter and leave 
<Transition duration={{ enter: 300, leave: 500 }}>
  {show ? <div>Content</div> : null}
</Transition>
Enter fullscreen mode Exit fullscreen mode

Compilation strategy summary

VuReact's Transition compilation strategy demonstrates a complete transition animation conversion capability:

  1. Direct component mapping: Maps Vue <Transition> directly to VuReact's <Transition>
  2. Full attribute support: Supports all attributes including name, mode, custom class names, hook functions, etc.
  3. CSS class name generation: Automatically generates and applies transition-related CSS class names
  4. JavaScript integration: Supports animation control through JS hooks

Core features:

  1. Automatic class names: Auto-generates CSS transition class names via the name attribute
  2. Mode control: Controls the order of enter/leave animations via mode
  3. Custom class names: Directly specifies transition class names, supporting third-party animation libraries
  4. JS hooks: Executes JavaScript logic at different animation stages
  5. Duration control: Precisely controls the duration of transition animations

Important notes:

  1. Single child node: <Transition> can only have one direct child node
  2. Key requirement: It is recommended to provide a stable key when switching between different elements
  3. CSS requirement: The transition appearance must be set in *-enter-active and *-leave-active
  4. Performance considerations: Complex animations may affect performance; use them wisely

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually implement transition animation logic. The compiled code preserves Vue's transition semantics and animation effects while following React's component design patterns, keeping the migrated application fully capable of transition animations.

Related Links

Top comments (0)