Skip to content

Contribution to the implementation of auxiliaries for the transition #111

@codermarcos

Description

@codermarcos

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions