typestyle / csx

Utility functions for TypeStyle
https://typestyle.github.io
MIT License
102 stars 14 forks source link

Contribution to the implementation of auxiliaries for the transition #111

Open codermarcos opened 3 years ago

codermarcos commented 3 years ago

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:

  1. 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)
  }),
});
  1. 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?