https://github.com/dash-ui/transition
A library for creating performant and composable CSS transitions with @dash-ui
https://github.com/dash-ui/transition
animation-framework animation-library css-in-js-animation css-in-js-transition css-in-js-transitions css-transition css-transition-framework css-transition-library css-transitions dash dash-ui
Last synced: about 2 months ago
JSON representation
A library for creating performant and composable CSS transitions with @dash-ui
- Host: GitHub
- URL: https://github.com/dash-ui/transition
- Owner: dash-ui
- License: mit
- Created: 2020-01-06T05:00:44.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-10-17T09:28:42.000Z (over 2 years ago)
- Last Synced: 2025-10-28T18:46:40.416Z (7 months ago)
- Topics: animation-framework, animation-library, css-in-js-animation, css-in-js-transition, css-in-js-transitions, css-transition, css-transition-framework, css-transition-library, css-transitions, dash, dash-ui
- Language: TypeScript
- Homepage:
- Size: 1.37 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
> A library for creating CSS transitions with dash-ui
```sh
npm i @dash-ui/transition
```
---
## Quick Start
[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uitransition-example-lj5sv?file=/src/App.tsx)
```jsx harmony
import { styles } from "@dash-ui/styles";
import transition from "@dash-ui/transition";
styles.insertTokens({
transition: {
duration: {
slow: "1s",
},
},
});
const fade = transition(styles, {
// default styles and options
default: {
duration: 100,
},
// Use a callback to access tokens
in: ({ transition }) => ({
opacity: 1,
duration: transition.duration.slow,
}),
out: {
opacity: 0,
},
});
const Component = ({ visible }) => (
Foo
);
```
## API
## LICENSE
MIT