csx
csx copied to clipboard
Contribution to the implementation of auxiliaries for the transition
Hello i'm newbe here! 😅 I don't found instruction in CONTRIBUING.md, so if you're talking about the wrong place, sorry.
I can be mistaken, but i dont found implementations to transition, or attr this will be for another issue. ❤️ I'm willing to contribute by opening a pull request to implement this as best we choose here.
Today we write similar to this
const x = style({
transition: 'transform .4s ease-in 1s, color .2s',
});
I have some suggestions:
- Based on what already exists today similar to the border using Array of Object.
import {transition} from 'csx';
const x = style({
transition: transition({
delay: 1s, // milliseconds(1) || seconds(0.1)
property: 'transform',
timingFunction: 'ease-in',
duration: 400, // milliseconds(400) || seconds(0.4)
},
{
property: 'color',
duration: 200, // milliseconds(200) || seconds(0.2)
}),
});
- Using array tuples with labels like this:
type TransitionOptions = Array<[property: string, duration: number | string, ...etc]>
But to use like this:
import {transition} from 'csx';
const x = style({
transition: transition(['transform', 400, 'ease-in', 400], ['color', 200]),
});
Of course these are just suggestions I would love to see other implementation suggestions. Would you like to know if pull requests are welcome?