Transitions

Utilities for controlling the duration and easing of state transitions in Wind.

• Basic Usage
• Quick Reference
• Variants
  • Duration
  • Easing
• Responsive Design
• Dark Mode
• Arbitrary Values
• Customizing Theme
• Related Documentation

Basic Usage

Transitions allow you to change property values smoothly over a given duration. In Wind, these are typically paired with state modifiers like hover:, focus:, or active:.

// Smoothly transition background color on hover
WDiv(
  className: 'bg-blue-500 hover:bg-blue-700 duration-300 ease-in-out',
  child: WText('Hover Me', className: 'text-white'),
)

By adding duration-200, the background color shift happens over 200 milliseconds instead of snapping instantly.

Quick Reference

Duration

Easing (Timing Function)

Variants

Duration

Use the duration-{ms} utility to set the length of the transition animation.

WDiv(className: 'duration-500 ...')

Easing

Control the rate of change with ease-{curve} utilities. This defines the "feel" of the animation.

WDiv(className: 'ease-out duration-300 ...')

Responsive Design

Apply different transition speeds or curves at different breakpoints using the standard responsive prefixes.

// Slow transition on desktop, fast on mobile
WDiv(className: 'duration-150 lg:duration-500')

Dark Mode

Use the dark: prefix to apply different transition styles when the application is in dark mode.

WDiv(className: 'duration-200 dark:duration-500')

Arbitrary Values

If the standard scale doesn't fit your specific animation needs, use bracket notation to provide a custom millisecond value.

WDiv(className: 'duration-[420ms] ease-[Curves.bounceOut]')

Customizing Theme

To extend or override the default transition scales, modify WindThemeData in your app configuration.

WindTheme(
  data: WindThemeData(
    transitionDurations: {
      'snappy': Duration(milliseconds: 50),
      'lazy': Duration(milliseconds: 2000),
    },
    transitionCurves: {
      'bounce': Curves.bounceOut,
    },
  ),
  child: MyApp(),
)

Usage: duration-snappy, ease-bounce.

Related Documentation

• Animation - Explicit keyframe animations
• Hover States - Handling interactions
• Opacity - Fade transitions