View Transitions

⭐Star

TechUI encapsulates a high-performance view transition system based on the modern browser-native View Transitions API. It automatically captures interface snapshots and executes cinema-grade transition animations during route navigation, theme switching, or arbitrary DOM updates.

It is a global transition animation tool capable of achieving the following functions:

• Route switching transition animations
  • Supports ordered switching (combined with route Order parameters to achieve effects like left flip, right flip, etc.)
  • Supports disordered switching
• Theme switching transition animations
• Local switching animations (e.g., specific DOM containers)

Compatibility Note

Since this feature uses the document.startViewTransition API, it is only supported by Chromium-based browsers (e.g., Chrome 111+, Edge 111+).

In unsupported browsers (such as Firefox, Safari), the system will automatically handle graceful degradation: status updates or route jumps will be executed directly without playing transition animations, ensuring business logic runs normally.

Core Usage

In components, you can obtain core transition-related methods by injecting $global.

import { inject } from 'vue';

const { 
  routerTransition, // Route navigation transition
  themeToggle,      // Theme toggle transition
  viewTransToggle,  // Manually configure transition parameters
  viewTransStart    // Manually trigger transition
} = inject('$global');

Route Navigation (routerTransition)

This is the most commonly used method, intended to replace Vue Router's router.push, adding animation effects to page transitions.

Basic Usage:

// Navigate to the dashboard using the default animation
routerTransition({ path: '/dashboard' });

Specify Animation Effect:

routerTransition({ 
  path: '/login',
  transName: 'vt-ripple', // Specify ripple effect
  transDur: 1.5           // Animation duration 1.5s
});

Automatic Direction Based on Order: If an order index is defined in the route configuration (meta.order), enabling useOrder allows the system to automatically determine whether to play a "forward" or "backward" animation.

// If current order: 1, target order: 2, play forward animation (vt-slide-left)
// If current order: 2, target order: 1, play backward animation (vt-slide-right)
routerTransition({ 
  path: '/detail',
  useOrder: true 
});

API Parameter Table:

Parameter Name	Type	Default	Description
path	String	-	Target route path (Required).
query V0.0.5+	Object	-	Route query parameters.
transName	String	null	Specify animation name (see list below). If empty, default config is used.
transTarget	String	null	Animation target (e.g., 'root', 'layout').
transDur	Number	null	Animation duration (seconds).
useOrder	Boolean	false	Whether to automatically determine animation direction based on meta.order.

Theme Toggle (themeToggle)

TechUI includes a built-in encapsulation for theme switching transitions. When you call this method, the system will play a circular diffusion (or other configured) animation centered on the current click position.

// Switch to dark blue theme
themeToggle('darkBlue', 'dark');

Custom Transitions

If you need to use transition animations in non-routing, non-theme-switching scenarios (such as manually updating specific DOM node content), you can combine viewTransToggle and viewTransStart.

const handleUpdate = async () => {
  // 1. Configure animation params: acts on root node, uses dissolve effect, duration 0.5s
  viewTransToggle('root', 'vt-dissolve', 0.5);
  
  // 2. Wait for DOM updates to be ready
  await nextTick();
  
  // 3. Start transition
  viewTransStart({
    callback: () => {
      // Execute actual DOM update operations in the callback
      showDetail.value = true; 
    },
    enable: true, // Force enable
    complete: () => {
      // Callback after animation completes, usually used to reset parameters
      viewTransToggle(); 
    }
  });
};

Global Configuration

You can control the global switch for the transition feature in $globalConfig.

• transition: Boolean
• true: Enable transition animations (Default).
• false: Disable globally; all routerTransition calls will jump directly without animation.

Animation Effect List

TechUI provides a rich set of preset animation effects. You can use these names directly in the transName parameter.

Geometric/Mask

Suitable for large-scale scene switching or theme toggling.

• vt-overlap: Overlap zoom (Default general effect).
• vt-circle: Circular diffusion (Center).
• vt-circle-rt: Circular diffusion (Top Right).
• vt-circle-tc: Circular diffusion (Top Center).
• vt-ripple: Ripple diffusion.

Fade/Dissolve

Suitable for content updates or gentle page transitions.

• vt-fade: Standard fade in/out.
• vt-dissolve: Dissolve transition.

Slide

Suitable for page transitions with spatial hierarchy relationships.

• vt-slide-up: Slide in up.
• vt-slide-down: Slide in down.
• vt-slide-left: Slide in left (Usually for "Forward").
• vt-slide-right: Slide in right (Usually for "Back").

Flip

Suitable for card flips or special display effects.

• vt-flip-up: Flip up.
• vt-flip-down: Flip down.
• vt-flip-left: Flip left.
• vt-flip-right: Flip right.

Acknowledgements & Credits

Frontend Eagle (前端老鹰)

BiliBili

The concept for global transition effects first sprouted from some technical blogs but was put on hold. It wasn't until I stumbled upon a share by "Frontend Eagle" that I was truly motivated to implement it, initially applying it to TechUI's theme switching feature.

As development deepened, I realized this effect shouldn't be limited to "skin changing." Through further abstraction and encapsulation, I upgraded it into a powerful general-purpose component. Now, it not only handles complex theme switching but also perfectly supports directional route navigation, Vue component switching, and various local animation needs via rich configuration options.

Click here to view the original video explanation Frontend Eagle - Theme Switching Animation Effect.