Transitions
Utilities for controlling the duration and easing of state transitions in Wind.
On this page
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: or focus:. active: is not wired to the pointer; it applies only when the widget is given states: {'active'}.
interactivity/transition_basic
A live demo of this example follows.
transition_basic.dart
View source
Open demo
// 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 colour shift happens over 200 milliseconds instead of snapping instantly.
Quick Reference#
Duration#
| Class | Value | Description |
|---|---|---|
duration-75 |
75ms | Very fast transition |
duration-100 |
100ms | Fast transition |
duration-150 |
150ms | |
duration-200 |
200ms | Standard UI transition |
duration-300 |
300ms | |
duration-500 |
500ms | Noticeable transition |
duration-700 |
700ms | |
duration-1000 |
1000ms | Slow transition |
Easing (Timing Function)#
| Class | Value | Description |
|---|---|---|
ease-linear |
Curves.linear |
Constant speed |
ease-in |
Curves.easeIn |
Starts slow, ends fast |
ease-out |
Curves.easeOut |
Starts fast, ends slow |
ease-in-out |
Curves.easeInOut |
Slow start and end |
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. Easing has no arbitrary form; pick one of the named curves.
WDiv(className: 'duration-[420ms] ease-out')
Customizing Theme#
To override the default transition scales, modify WindThemeData in your app configuration.
WindTheme(
data: WindThemeData(
transitionDurations: {
'200': Duration(milliseconds: 150),
},
transitionCurves: {
'out': Curves.easeOutCubic,
},
),
child: MyApp(),
)
Only the default keys parse (75 to 1000, linear, in, out, in-out); you can override their values, but new keys are not recognised.
Related Documentation#
- Animation - Explicit keyframe animations
- Hover States - Handling interactions
- Opacity - Fade transitions