English | 简体中文

Please note! ! Rely on the base library version 2.11.0

@ray-js/ray-transition-group

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

Installation

$ 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

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

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

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

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

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>
  )
}