[ @sdxc/u/effects ]
transition-delay
Applies transition-delay on its own, so items sharing one transition can stagger by giving each an increasing delay.
import { transitionDelay } from "@sdxc/u/effects";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.transitionDelay() | css({ transitionDelay: "0s" }) |
u.transitionDelay("120ms") | css({ transitionDelay: "120ms" }) |
Examples
Basic example
Use transitionDelay(time) to wait before a transition starts, with a CSS time like "150ms". Hover each button:
<div mix={[...]}>
<button
type="button"
mix={[
transition("transform", { duration: 300 }),
transitionDelay("0s"),
hover(scale(1.2)),
...,
]}
>
0s
</button>
<button
type="button"
mix={[
transition("transform", { duration: 300 }),
transitionDelay("150ms"),
hover(scale(1.2)),
...,
]}
>
150ms
</button>
<button
type="button"
mix={[
transition("transform", { duration: 300 }),
transitionDelay("500ms"),
hover(scale(1.2)),
...,
]}
>
500ms
</button>
</div>Staggering items
Give each item an increasing delay to stagger one transition across a group. Hover the row:
<div mix={[...]}>
<div
mix={[
transition("transform", { duration: 300 }),
transitionDelay("0ms"),
when(":hover > &", translateY(-4)),
...,
]}
/>
<div
mix={[
transition("transform", { duration: 300 }),
transitionDelay("75ms"),
when(":hover > &", translateY(-4)),
...,
]}
/>
<div
mix={[
transition("transform", { duration: 300 }),
transitionDelay("150ms"),
when(":hover > &", translateY(-4)),
...,
]}
/>
<div
mix={[
transition("transform", { duration: 300 }),
transitionDelay("225ms"),
when(":hover > &", translateY(-4)),
...,
]}
/>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.transitionDelay())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.transitionDelay())Signature
u.transitionDelay(value?: string)