npm package: @ray-js/ray-transition-group
Description: 使用 CSS3 实现过渡效果，故只适用于小程序和 web 平台
Latest version: 0.0.2

English | [简体中文](./README-zh_CN.md)

> Please note! ! Rely on the base library version 2.11.0

# @ray-js/ray-transition-group

[![latest](https://img.shields.io/npm/v/@ray-js/ray-transition-group/latest.svg)](https://www.npmjs.com/package/@ray-js/ray-transition-group) [![download](https://img.shields.io/npm/dt/@ray-js/ray-transition-group.svg)](https://www.npmjs.com/package/@ray-js/ray-transition-group)

> 使用 CSS3 实现过渡效果，故只适用于小程序和 web 平台

## Installation

```sh
$ npm install @ray-js/ray-transition-group
# or
$ yarn add @ray-js/ray-transition-group
```

## Usage

> Please note! ! Rely on the base library version 2.11.0
### Transition

```tsx
import { Transition } from '@ray-js/ray-transition-group';
import { View, Text } from '@ray-js/components';

const styles = {
  fade: {
    opacity: 0,
    transition: 'opacity 1s';
  },
  enter: {
    opacity: 1;
  },
  entered: {
    opacity: 1;
  }
}

export default () => (
  const [state] = useState(false);
  return (
    <Transition
      in={state}
      duration={1000}
      onEnter={() => {}}
      onEntering={() => {}}
      onEntered={() => {}}
      onExit={() => {}}
      onExiting={() => {}}
      onExited={() => {}}
    >
      {status => (
        <View
          className={classnames(styles.fade, {
            [styles.enter]: status === 'entering',
            [styles.entered]: status === 'entered',
          })}
        >
          <Text>{status}</Text>
        </View>
      )}
    </Transition>
  )
);
```

### CSSTransition

```tsx
export default () => {
  const [state, setState] = React.useState(true);
  return (
    <CSSTransition in={state} prefix="fade" appear>
      <View className="demo">
        <Text>hello</Text>
      </View>
    </CSSTransition>
  );
};
```

```tsx
export default () => {
  const [state, setState] = React.useState(true);
  return (
    <CSSTransition
      in={state}
      appear
      className="demo"
      enteringClsName="fadeEntering"
      enteredClsName="fadeEntered"
      exitingClsName="fadeExiting"
      exitedClsName="fadeExited"
    >
      <View>
        <Text>hello</Text>
      </View>
    </CSSTransition>
  );
};
```

### SwitchTransition

```tsx
import { Transition, SwitchTransition, CSSTransition } from '@ray-js/ray-transition-group';
import { View, Text } from '@ray-js/components';

export default () => {
  const [state, setState] = React.useState('on');
  return (
    <SwitchTransition mode="same-time">
      <Transition key={state} duration={500}>
        {status => (
          <View
            className={classnames(styles.demo1, {
              [styles.demo1Exiting]: status === 'exiting',
              [styles.demo1Exited]: status === 'exited',
              [styles.demo1Entering]: status === 'entering',
              [styles.demo1Entered]: status === 'entered',
            })}
          >
            <Text>{state}</Text>
          </View>
        )}
      </Transition>
    </SwitchTransition>
  );
};

export default () => {
  const [state, setState] = React.useState('on');
  return (
    <SwitchTransition>
      <CSSTransition key={state} duration={500}>
        <Text>{state}</Text>
      </CSSTransition>
    </SwitchTransition>
  );
};
```

### TransitionGroup

```tsx
import { TransitionGroup, , CSSTransition } from '@ray-js/ray-transition-group';
import { View, Text } from '@ray-js/components';

export default () => {
  const [data, setData] => React.useState([1, 2, 3]);
  return (
    <TransitionGroup>
      {
        data.map(item => (
          <CSSTransition key={item} prefix="fade">
            <Text>{item}</Text>
          </CSSTransition>
        ))
      }
    </TransitionGroup>
  )
}

```