https://github.com/binfoe/react-transition
simple react transition and transition-group library
https://github.com/binfoe/react-transition
Last synced: over 1 year ago
JSON representation
simple react transition and transition-group library
- Host: GitHub
- URL: https://github.com/binfoe/react-transition
- Owner: binfoe
- Created: 2024-02-08T01:27:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-27T05:40:42.000Z (over 2 years ago)
- Last Synced: 2025-01-24T20:41:27.366Z (over 1 year ago)
- Language: TypeScript
- Size: 85.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react transition
> simple react transition and transition-group library
## Install
```bash
pnpm install reactrans
```
## Transition
### Usage
```tsx
import { Transition } from 'reactrans';
export const Demo: FC = () => {
const [open, setOpen] = useState(false);
return (
hello world
{
setOpen(!open);
}}
>
Toggle
);
};
```
### Properties
属性参数
- `isEnter` 当前展示状态。true 代表 enter 状态，false 代表 leave 状态。必要参数，用于控制 enter 和 leave 切换动画。
- `enter` enter 状态的 classname。
- `leave` leave 状态的 classname。
- `enterActive`enter 开始时的激活 classname，用于控制 enter 和 leave 使用不同动画。可选参数，默认为空。
- `leaveActive`leave 开始时的激活 classname，用于控制 enter 和 leave 使用不同动画。可选参数，默认为空。
- `destroyAfterLeave` 是否在 leave 动画后销毁 DOM。可选参数，默认 false。
- `appear` 是否在首次渲染时展示动画。可选参数默认 false。
回调参数
- `onAfterEnter`: (el) => void;
- `onEnterCancelled`: (el) => void;
- `onAfterLeave`: (el) => void;
- `onLeaveCancelled`: (el) => void;
## Transition-Group
### Usage
```tsx
import { TransitionGroup, Transition } from 'reactrans';
export const DemoList: FC = () => {
const tt = useState(['a', 'b']);
return (
<>
setTt((v) => [...v, Date.now().toString(32)])}>Add Item
{tt.map((t, i) => (
{
setTt((v) => {
const nv = v.slice();
nv.splice(i, 1);
return nv;
});
}}
className="py-2 transition-all duration-[5s]"
>
{t}
))}
>
);
};
```
### Properties
- `appear` 是否在首次渲染时展示动画。可选参数，默认 false。