@douyinfe/semi-animation-react 2.0.0-alpha.0

package/README.md

@@ -0,0 +1,70 @@
+> React animation library based on `@douyinfe/semi-animation`.
+
+The transition animation effects of all components in `@douyinfe/semi-ui` are implemented based on this animation library, such as: Modal, Tooltip, Collapse and other component content display and exit effects.
+
+## Install
+
+```sh
+npm install @douyinfe/semi-animation-react
+```
+
+## Usage
+
+### Transition Component
+
+It is used to realize the animation effect of the component [show and exit]. Examples are as follows:
+
+```jsx
+import { Transition } from "@douyinfe/semi-animation-react";
+import { useState } from "react";
+
+export default function App() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div className="App">
+      <Transition
+        state={visible ? "enter" : "leave"}
+        from={{ opacity: 0, scale: 0}}
+        enter={{ opacity: 1, scale: 1 }}
+        leave={{ opacity: 0, scale: 0 }}
+      >
+        {({scale, opacity}: any) => (
+          <h2 style={{transform: `scale(${scale})`, opacity}}>
+            Toggle to see some animation happen!
+          </h2>
+        )}
+      </Transition>
+
+      <button onClick={() => {
+        setVisible((state) => !state)
+      }}>toggle</button>
+    </div>
+  );
+}
+```
+
+### Props
+
+|Name|Type|Required|Default|Description|
+|--|--|--|--|--|
+|from|Object|Y||Initial state|
+|enter|Object|Y||Show the end state of the animation, but also the initial state of the exit animation|
+|leave|Object|Y||Exit the termination state of the animation|
+|state|Enum 'enter', 'leave'|N|''|Current state|
+|willEnter|Function|N|()=> {}|The callback function before the enter animation starts|
+|didEnter|Function|N|()=> {}|The callback function before the animation ends|
+|willLeave|Function|N|()=> {}|The callback function before the exit animation starts |
+|didLeave|Function|N|()=> {}|The callback function before the exit animation ends|
+|onStart|Function|N|()=> {}|The callback function before animation starts,including enter and exit|
+|onRest|Function|N|()=> {}|The callback function before animation ends,including enter and exit|
+|config|ConfigType|N|{}|Additional animation parameters|
+
+### config
+
+|Name|Type|Default|Description|
+|--|--|--|--|
+|duration|Number|1000|Animation duration.If this parameter is passed in, the easing function of the animation will use easing or linear function,unit: ms|
+| easing   | Function\|String   |        | Easing function for animation. If duration is not passed, the spring easing function is used by default. If the duration parameter is passed in, the linear easing function will be used by default.For example, incoming `"cubic-bezier(.17,.67,.83,.67)"` will cause the animation frame update performed according to this easing function |
+| tension  | Number             | 170    | Tension, used for spring easing function  |
+| friction | Number             | 14     | Friction, used for spring easing function  |
+

package/lib/es/index.d.ts

@@ -0,0 +1,6 @@
+export { default as StyledAnimation } from './src/StyledAnimation';
+export { default as StyledTransition } from './src/StyledTransition';
+export { default as Animation } from './src/Animation';
+export { default as KeyFrames } from './src/KeyFrames';
+export { default as Transition } from './src/Transition';
+export { interpolate, presets } from '@douyinfe/semi-animation';

package/lib/es/index.js

@@ -0,0 +1,6 @@
+export { default as StyledAnimation } from './src/StyledAnimation';
+export { default as StyledTransition } from './src/StyledTransition';
+export { default as Animation } from './src/Animation';
+export { default as KeyFrames } from './src/KeyFrames';
+export { default as Transition } from './src/Transition';
+export { interpolate, presets } from '@douyinfe/semi-animation';

package/lib/es/src/Animation.d.ts

@@ -0,0 +1,70 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import noop from './utils/noop';
+export interface AnimationProps {
+    onStart?: Function;
+    onFrame?: Function;
+    onPause?: Function;
+    onResume?: Function;
+    onStop?: Function;
+    onRest?: Function;
+    children?: React.ReactNode;
+    from?: Record<string, any>;
+    to?: Record<string, any>;
+    reverse?: boolean;
+    reset?: boolean;
+    force?: boolean;
+    config?: Record<string, any>;
+    autoStart?: boolean;
+    forwardInstance?: (value: any) => void;
+    immediate?: boolean;
+}
+export default class Animation extends PureComponent<AnimationProps> {
+    static propTypes: {
+        onStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onFrame: PropTypes.Requireable<(...args: any[]) => any>;
+        onPause: PropTypes.Requireable<(...args: any[]) => any>;
+        onResume: PropTypes.Requireable<(...args: any[]) => any>;
+        onStop: PropTypes.Requireable<(...args: any[]) => any>;
+        onRest: PropTypes.Requireable<(...args: any[]) => any>;
+        children: PropTypes.Requireable<any>;
+        from: PropTypes.Requireable<object>;
+        to: PropTypes.Requireable<object>;
+        reverse: PropTypes.Requireable<boolean>;
+        reset: PropTypes.Requireable<boolean>;
+        force: PropTypes.Requireable<boolean>;
+        config: PropTypes.Requireable<object>;
+        autoStart: PropTypes.Requireable<boolean>;
+        forwardInstance: PropTypes.Requireable<(...args: any[]) => any>;
+        immediate: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        autoStart: boolean;
+        force: boolean;
+        onStart: typeof noop;
+        onFrame: typeof noop;
+        onPause: typeof noop;
+        onResume: typeof noop;
+        onStop: typeof noop;
+        onRest: typeof noop;
+    };
+    _mounted: boolean;
+    _destroyed: boolean;
+    animation: any;
+    reverse: () => void;
+    destroy: () => void;
+    reset: () => void;
+    resume: () => void;
+    end: () => void;
+    stop: () => void;
+    pause: () => void;
+    start: () => void;
+    constructor(props?: {});
+    startOrNot(): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps?: AnimationProps): void;
+    initAnimation: (props?: AnimationProps) => void;
+    bindEvents: () => void;
+    render(): any;
+}

package/lib/es/src/Animation.js

@@ -0,0 +1,207 @@
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
+
+/* eslint-disable @typescript-eslint/ban-types */
+
+/* eslint-disable react/destructuring-assignment */
+import { PureComponent, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import { Animation as SemiAnimation, events } from '@douyinfe/semi-animation';
+import noop from './utils/noop';
+export default class Animation extends PureComponent {
+  constructor(props = {}) {
+    super(props);
+
+    this.initAnimation = props => {
+      // eslint-disable-next-line eqeqeq
+      props = props == null ? this.props : props; // eslint-disable-next-line prefer-const
+
+      let {
+        from,
+        to,
+        config,
+        reverse
+      } = props;
+
+      if (reverse) {
+        [from, to] = [to, from];
+      }
+
+      this.animation = new SemiAnimation({
+        from: _Object$assign({}, from),
+        to: _Object$assign({}, to)
+      }, _Object$assign({}, config));
+
+      _forEachInstanceProperty(events).call(events, event => {
+        const propName = "on".concat(event[0].toUpperCase() + _sliceInstanceProperty(event).call(event, 1)); // eslint-disable-next-line @typescript-eslint/no-shadow
+
+        this.animation.on(event, props => {
+          // avoid memory leak
+          if (this._mounted && !this._destroyed) {
+            this.setState({
+              currentStyle: _Object$assign({}, props)
+            });
+            this.props[propName](props);
+          }
+        });
+      });
+
+      this._destroyed = false;
+    };
+
+    this.bindEvents = () => {
+      this.startOrNot = () => {
+        const {
+          immediate,
+          autoStart
+        } = this.props;
+
+        if (immediate) {
+          this.end();
+        } else if (autoStart) {
+          this.start();
+        }
+      };
+
+      this.start = () => {
+        this.animation && this.animation.start();
+      };
+
+      this.pause = () => {
+        this.animation && this.animation.pause();
+      };
+
+      this.stop = () => {
+        this.animation && this.animation.stop();
+      };
+
+      this.end = () => {
+        this.animation && this.animation.end();
+      };
+
+      this.resume = () => {
+        this.animation && this.animation.resume();
+      };
+
+      this.reset = () => {
+        if (this.animation) {
+          this.animation.reset();
+          this.startOrNot();
+        }
+      };
+
+      this.reverse = () => {
+        if (this.animation) {
+          var _context;
+
+          _reverseInstanceProperty(_context = this.animation).call(_context);
+
+          this.startOrNot();
+        }
+      };
+
+      this.destroy = () => {
+        this._destroyed = true;
+        this.animation && this.animation.destroy();
+      };
+    };
+
+    this.state = {
+      currentStyle: {}
+    };
+    this._mounted = false;
+    this._destroyed = false;
+    this.initAnimation();
+    this.bindEvents();
+  }
+
+  startOrNot() {
+    throw new Error('Method not implemented.');
+  }
+
+  componentDidMount() {
+    this._mounted = true;
+    const {
+      forwardInstance
+    } = this.props;
+
+    if (typeof forwardInstance === 'function') {
+      forwardInstance(this.animation);
+    }
+
+    this.startOrNot();
+  }
+
+  componentWillUnmount() {
+    this._mounted = false;
+
+    if (this.animation) {
+      this.animation.destroy();
+      this.animation = null;
+    }
+  }
+
+  componentDidUpdate(prevProps = {}) {
+    if (this.props.reset) {
+      if (this.props.from !== prevProps.from || this.props.to !== prevProps.to) {
+        this.destroy();
+        this.initAnimation();
+        this.startOrNot();
+      }
+    }
+
+    if (this.props.force) {
+      if (this.props.to !== prevProps.to) {
+        this.initAnimation(_Object$assign(_Object$assign({}, this.props), {
+          from: prevProps.to
+        }));
+        this.startOrNot();
+      }
+    }
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+
+    if (typeof children === 'function') {
+      return children(this.animation.getCurrentStates());
+    } else if ( /*#__PURE__*/isValidElement(children)) {
+      return children;
+    } else {
+      return null;
+    }
+  }
+
+}
+Animation.propTypes = {
+  onStart: PropTypes.func,
+  onFrame: PropTypes.func,
+  onPause: PropTypes.func,
+  onResume: PropTypes.func,
+  onStop: PropTypes.func,
+  onRest: PropTypes.func,
+  children: PropTypes.any,
+  from: PropTypes.object,
+  to: PropTypes.object,
+  reverse: PropTypes.bool,
+  reset: PropTypes.bool,
+  force: PropTypes.bool,
+  config: PropTypes.object,
+  autoStart: PropTypes.bool,
+  forwardInstance: PropTypes.func,
+  immediate: PropTypes.bool
+};
+Animation.defaultProps = {
+  autoStart: true,
+  force: false,
+  onStart: noop,
+  onFrame: noop,
+  onPause: noop,
+  onResume: noop,
+  onStop: noop,
+  onRest: noop
+};

package/lib/es/src/KeyFrames.d.ts

@@ -0,0 +1,39 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import noop from './utils/noop';
+export interface KeyFramesProps {
+    frames?: any[];
+    loop?: boolean;
+    forwardInstance?: (value: any) => void;
+    onFrame?: (value: any) => void;
+    onKeyRest?: (value: Record<string, any>) => void;
+    onRest?: (value: Record<string, any>) => void;
+}
+export interface KeyFramesStates {
+    currentStyle: Record<string, any>;
+    frameIndex: number;
+}
+export default class KeyFrames extends Component<KeyFramesProps, KeyFramesStates> {
+    static propTypes: {
+        frames: PropTypes.Requireable<any[]>;
+        loop: PropTypes.Requireable<boolean>;
+        onFrame: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyRest: PropTypes.Requireable<(...args: any[]) => any>;
+        onRest: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        frames: any[];
+        loop: boolean;
+        onKeyRest: typeof noop;
+        onRest: typeof noop;
+        onFrame: typeof noop;
+    };
+    instance: any;
+    constructor(props?: {});
+    onFrame: (props?: {}) => void;
+    next: () => void;
+    forwardInstance: (instance: any) => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}

package/lib/es/src/KeyFrames.js

@@ -0,0 +1,104 @@
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+/* eslint-disable react/destructuring-assignment */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import noop from './utils/noop';
+import Animation from './Animation';
+export default class KeyFrames extends Component {
+  constructor(props = {}) {
+    super(props);
+
+    this.onFrame = (props = {}) => {
+      const currentStyle = _Object$assign({}, props);
+
+      this.props.onFrame(currentStyle);
+      this.setState({
+        currentStyle
+      });
+    };
+
+    this.next = () => {
+      let {
+        frameIndex
+      } = this.state;
+      const {
+        frames,
+        loop
+      } = this.props;
+      frameIndex++;
+
+      if (frameIndex < frames.length - 1) {
+        this.setState({
+          frameIndex
+        });
+      } else {
+        frameIndex = 0;
+        this.props.onRest(this.state.currentStyle);
+
+        if (loop) {
+          this.setState({
+            frameIndex
+          });
+        }
+      }
+
+      this.props.onKeyRest(this.state.currentStyle);
+    };
+
+    this.forwardInstance = instance => {
+      this.instance = instance;
+
+      if (typeof this.props.forwardInstance === 'function') {
+        this.props.forwardInstance(this.instance);
+      }
+    };
+
+    this.state = {
+      currentStyle: {},
+      frameIndex: 0
+    };
+  }
+
+  componentDidMount() {// this.props.forwardInstance(this.instance);
+  }
+
+  componentWillUnmount() {
+    this.instance && this.instance.destroy();
+  }
+
+  render() {
+    const {
+      children,
+      frames
+    } = this.props;
+    const {
+      frameIndex,
+      currentStyle
+    } = this.state;
+    const from = frames[frameIndex];
+    const to = frames[frameIndex + 1];
+    return /*#__PURE__*/React.createElement(Animation, _Object$assign({}, this.props, {
+      forwardInstance: this.forwardInstance,
+      from: from,
+      to: to,
+      onFrame: this.onFrame,
+      onRest: this.next
+    }), typeof children === 'function' ? children(currentStyle) : children);
+  }
+
+}
+KeyFrames.propTypes = {
+  frames: PropTypes.array,
+  loop: PropTypes.bool,
+  onFrame: PropTypes.func,
+  onKeyRest: PropTypes.func,
+  onRest: PropTypes.func
+};
+KeyFrames.defaultProps = {
+  frames: [],
+  loop: false,
+  onKeyRest: noop,
+  onRest: noop,
+  onFrame: noop
+};

package/lib/es/src/StyledAnimation.d.ts

@@ -0,0 +1,57 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-animation-styled';
+import noop from './utils/noop';
+export interface StyledAnimationProps {
+    className?: string;
+    type?: any;
+    style?: React.CSSProperties;
+    speed?: string | number;
+    delay?: string | number;
+    reverse?: boolean | string;
+    loop?: string | number;
+    children?: any;
+    onStart?: (value: any) => void;
+    onFrame?: (value: any) => void;
+    onRest?: (value: any) => void;
+    prefixCls?: string;
+    timing?: string;
+    duration?: string | number;
+    fillMode?: string;
+}
+export default class StyledAnimation extends PureComponent<StyledAnimationProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<any>;
+        speed: PropTypes.Requireable<string | number>;
+        delay: PropTypes.Requireable<string | number>;
+        reverse: PropTypes.Requireable<string | boolean>;
+        loop: PropTypes.Requireable<string | number>;
+        children: PropTypes.Requireable<any>;
+        onStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onFrame: PropTypes.Requireable<(...args: any[]) => any>;
+        onRest: PropTypes.Requireable<(...args: any[]) => any>;
+        prefixCls: PropTypes.Requireable<string>;
+        timing: PropTypes.Requireable<string>;
+        duration: PropTypes.Requireable<string | number>;
+        fillMode: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        prefixCls: string;
+        speed: string;
+        onFrame: typeof noop;
+        onStart: typeof noop;
+        onRest: typeof noop;
+    };
+    constructor(props?: {});
+    _generateAnimateEvents: (child: React.ReactElement, props?: StyledAnimationProps) => {
+        onAnimationIteration: (...args: any) => void;
+        onAnimationStart: (...args: any) => void;
+        onAnimationEnd: (...args: any) => void;
+    };
+    _hasSpeedClass: (speed?: string | number) => boolean;
+    _hasTypeClass: (type?: any) => any;
+    _hasDelayClass: (delay?: string | number) => boolean;
+    _hasLoopClass: (loop?: string | number) => boolean;
+    render(): any;
+}

package/lib/es/src/StyledAnimation.js

@@ -0,0 +1,131 @@
+var _context;
+
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+/* eslint-disable react/destructuring-assignment */
+
+/* eslint-disable prefer-const */
+
+/* eslint-disable eqeqeq */
+
+/* eslint-disable import/no-duplicates */
+
+/* eslint-disable no-duplicate-imports */
+import { PureComponent, isValidElement, cloneElement, Children } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import '@douyinfe/semi-animation-styled'; // eslint-disable-next-line @typescript-eslint/no-duplicate-imports
+
+import { types as styledTypes, loops, delays, speeds } from '@douyinfe/semi-animation-styled';
+import noop from './utils/noop';
+import invokeFns from './utils/invokeFns';
+
+const types = _reduceInstanceProperty(_context = _Object$values(styledTypes)).call(_context, (arr, cur) => [...arr, ...cur], []);
+
+export default class StyledAnimation extends PureComponent {
+  constructor(props = {}) {
+    super(props);
+
+    this._generateAnimateEvents = (child, props = {}) => ({
+      onAnimationIteration: (...args) => invokeFns([child && child.props && child.props.onAnimationIteration, props.onFrame], args),
+      onAnimationStart: (...args) => invokeFns([child && child.props && child.props.onAnimationStart, props.onStart], args),
+      onAnimationEnd: (...args) => invokeFns([child && child.props && child.props.onAnimationEnd, props.onRest], args)
+    });
+
+    this._hasSpeedClass = (speed = this.props.speed) => speed != null && _includesInstanceProperty(speeds).call(speeds, speed);
+
+    this._hasTypeClass = (type = this.props.type) => type != null && _includesInstanceProperty(types).call(types, type);
+
+    this._hasDelayClass = (delay = this.props.delay) => delay != null && _includesInstanceProperty(delays).call(delays, delay);
+
+    this._hasLoopClass = (loop = this.props.loop) => loop != null && _includesInstanceProperty(loops).call(loops, loop);
+  }
+
+  render() {
+    var _context2, _context3, _context4, _context5;
+
+    let {
+      type,
+      speed,
+      duration,
+      delay,
+      loop,
+      reverse,
+      children,
+      prefixCls,
+      timing,
+      className,
+      fillMode
+    } = this.props;
+
+    const hasTypeClass = this._hasTypeClass();
+
+    const hasSpeedClass = this._hasSpeedClass();
+
+    const hasDelayClass = this._hasDelayClass();
+
+    const hasLoopClass = this._hasLoopClass();
+
+    const animateCls = className || classnames("".concat(prefixCls, "-animated"), {
+      [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, type)]: Boolean(type),
+      [_concatInstanceProperty(_context3 = "".concat(prefixCls, "-speed-")).call(_context3, speed)]: hasSpeedClass,
+      [_concatInstanceProperty(_context4 = "".concat(prefixCls, "-delay-")).call(_context4, delay)]: hasDelayClass,
+      [_concatInstanceProperty(_context5 = "".concat(prefixCls, "-loop-")).call(_context5, loop)]: hasLoopClass
+    });
+    const animateStyle = {
+      animationTimingFunction: timing,
+      animationName: !hasTypeClass && type,
+      animationDuration: duration,
+      animationDelay: !hasDelayClass && delay,
+      animationIterationCount: !hasLoopClass && loop,
+      animationDirection: reverse ? 'alternate' : 'normal',
+      animationFillMode: fillMode
+    };
+
+    if ( /*#__PURE__*/isValidElement(children)) {
+      children = _mapInstanceProperty(Children).call(Children, children, child => {
+        const animateEvents = this._generateAnimateEvents(child, this.props);
+
+        return /*#__PURE__*/cloneElement(child, _Object$assign({
+          className: classnames(child.props.className, animateCls),
+          style: _Object$assign(_Object$assign({}, child.props.style), this.props.style)
+        }, animateEvents));
+      });
+    }
+
+    return typeof children === 'function' ? children({
+      animateCls,
+      animateStyle,
+      animateEvents: this._generateAnimateEvents(null, this.props)
+    }) : children;
+  }
+
+}
+StyledAnimation.propTypes = {
+  className: PropTypes.string,
+  type: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
+  speed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  reverse: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  loop: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  children: PropTypes.any,
+  onStart: PropTypes.func,
+  onFrame: PropTypes.func,
+  onRest: PropTypes.func,
+  prefixCls: PropTypes.string,
+  timing: PropTypes.string,
+  duration: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fillMode: PropTypes.string
+};
+StyledAnimation.defaultProps = {
+  prefixCls: 'semi',
+  speed: 'faster',
+  onFrame: noop,
+  onStart: noop,
+  onRest: noop
+};

package/lib/es/src/StyledTransition.d.ts

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { StyledAnimationProps } from './StyledAnimation';
+import noop from './utils/noop';
+export interface StyledTransitionProps extends StyledAnimationProps {
+    state?: string | boolean;
+    enter?: string;
+    leave?: string;
+    children?: React.ReactNode;
+    willEnter?: (value: any) => void;
+    didEnter?: (value: any) => void;
+    willLeave?: (value: any) => void;
+    didLeave?: (value: any) => void;
+    onStart?: (value: any) => void;
+    onRest?: (value: any) => void;
+}
+export interface StyledTransitionState {
+    state: string | boolean;
+    lastChildren: React.ReactNode;
+    currentChildren: React.ReactNode;
+}
+export default class StyledTransition extends Component<StyledTransitionProps, StyledTransitionState> {
+    static propTypes: {
+        state: PropTypes.Requireable<string>;
+        enter: PropTypes.Requireable<string>;
+        leave: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<any>;
+        willEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        didEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        willLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        didLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        onStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onRest: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        willEnter: typeof noop;
+        didEnter: typeof noop;
+        willLeave: typeof noop;
+        didLeave: typeof noop;
+        onStart: typeof noop;
+        onRest: typeof noop;
+    };
+    constructor(props?: {});
+    static getDerivedStateFromProps(props: StyledTransitionProps, state: StyledTransitionState): Partial<StyledTransitionState>;
+    _isControlled: () => boolean;
+    onRest: (props: any) => void;
+    onStart: (props: any) => void;
+    render(): JSX.Element;
+}

package/lib/es/src/StyledTransition.js

@@ -0,0 +1,161 @@
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable eqeqeq */
+
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import StyledAnimation from './StyledAnimation';
+import noop from './utils/noop';
+export default class StyledTransition extends Component {
+  constructor(props = {}) {
+    super(props);
+
+    this._isControlled = () => {
+      var _context;
+
+      return _includesInstanceProperty(_context = [true, false, 'enter', 'leave']).call(_context, this.props.state);
+    };
+
+    this.onRest = props => {
+      const {
+        state
+      } = this.state;
+
+      if (state === 'enter') {
+        this.props.didEnter(props);
+      } else if (state === 'leave') {
+        this.setState({
+          currentChildren: null,
+          lastChildren: null
+        });
+        this.props.didLeave(props);
+      }
+
+      this.props.onRest(props);
+    };
+
+    this.onStart = props => {
+      const {
+        state
+      } = this.state;
+
+      if (state === 'enter') {
+        this.props.willEnter(props);
+      } else if (state === 'leave') {
+        this.props.willLeave(props);
+      }
+
+      this.props.onStart(props);
+    };
+
+    this.state = {
+      state: '',
+      lastChildren: null,
+      currentChildren: null
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const willUpdateStates = {};
+
+    if (props.children !== state.currentChildren) {
+      willUpdateStates.lastChildren = state.currentChildren;
+      willUpdateStates.currentChildren = props.children;
+
+      if (props.children == null) {
+        willUpdateStates.state = 'leave';
+      } else {
+        willUpdateStates.state = 'enter';
+      }
+    }
+
+    if (props.state != null && props.state !== state.state) {
+      willUpdateStates.state = props.state;
+    }
+
+    return willUpdateStates;
+  }
+
+  render() {
+    const _a = this.props,
+          {
+      enter,
+      leave
+    } = _a,
+          restProps = __rest(_a, ["enter", "leave"]);
+
+    const {
+      currentChildren,
+      lastChildren
+    } = this.state;
+
+    const isControlled = this._isControlled();
+
+    let children, type;
+    let {
+      state
+    } = this.state;
+
+    if (isControlled) {
+      children = this.props.children;
+      state = this.props.state;
+    } else if (currentChildren == null && lastChildren == null) {
+      return null;
+    }
+
+    if (state === 'enter') {
+      type = enter;
+
+      if (!isControlled) {
+        children = currentChildren;
+      }
+    } else if (state === 'leave') {
+      type = leave;
+
+      if (!isControlled) {
+        children = lastChildren;
+      }
+    }
+
+    return /*#__PURE__*/React.createElement(StyledAnimation, _Object$assign({}, restProps, {
+      type: type,
+      onStart: this.onStart,
+      onRest: this.onRest
+    }), children);
+  }
+
+}
+StyledTransition.propTypes = {
+  state: PropTypes.string,
+  enter: PropTypes.string,
+  leave: PropTypes.string,
+  children: PropTypes.any,
+  willEnter: PropTypes.func,
+  didEnter: PropTypes.func,
+  willLeave: PropTypes.func,
+  didLeave: PropTypes.func,
+  onStart: PropTypes.func,
+  onRest: PropTypes.func
+};
+StyledTransition.defaultProps = {
+  willEnter: noop,
+  didEnter: noop,
+  willLeave: noop,
+  didLeave: noop,
+  onStart: noop,
+  onRest: noop
+};

package/lib/es/src/Transition.d.ts

@@ -0,0 +1,52 @@
+import { AnimationProps } from './Animation';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import noop from './utils/noop';
+export interface TransitionProps extends AnimationProps {
+    children?: React.ReactNode;
+    from?: Record<string, any>;
+    enter?: Record<string, any>;
+    leave?: Record<string, any>;
+    state?: string | boolean;
+    willEnter?: (value: any) => void;
+    didEnter?: (value: any) => void;
+    willLeave?: (value: any) => void;
+    didLeave?: (value: any) => void;
+    onRest?: (value: any) => void;
+    onStart?: (value: any) => void;
+}
+export interface TransitionState {
+    state: string | boolean;
+    lastChildren: React.ReactNode;
+    currentChildren: React.ReactNode;
+}
+export default class Transition extends Component<TransitionProps, TransitionState> {
+    static propTypes: {
+        children: PropTypes.Requireable<any>;
+        from: PropTypes.Requireable<object>;
+        enter: PropTypes.Requireable<object>;
+        leave: PropTypes.Requireable<object>;
+        willEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        didEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        willLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        didLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        state: PropTypes.Requireable<string | boolean>;
+    };
+    static defaultProps: {
+        willEnter: typeof noop;
+        didEnter: typeof noop;
+        willLeave: typeof noop;
+        didLeave: typeof noop;
+        onStart: typeof noop;
+        onRest: typeof noop;
+    };
+    instance: any;
+    constructor(props?: {});
+    static getDerivedStateFromProps(props: TransitionProps, state: TransitionState): Partial<TransitionState>;
+    componentWillUnmount(): void;
+    _isControlled: () => boolean;
+    forwardInstance: (instance: any) => void;
+    onRest: (props: any) => void;
+    onStart: (props: any) => void;
+    render(): JSX.Element;
+}

package/lib/es/src/Transition.js

@@ -0,0 +1,178 @@
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable eqeqeq */
+
+
+import Animation from './Animation';
+import PropTypes from 'prop-types';
+import React, { Component, isValidElement } from 'react';
+import noop from './utils/noop';
+export default class Transition extends Component {
+  constructor(props = {}) {
+    super(props);
+
+    this._isControlled = () => {
+      var _context;
+
+      return _includesInstanceProperty(_context = [true, false, 'enter', 'leave']).call(_context, this.props.state);
+    };
+
+    this.forwardInstance = instance => {
+      this.instance = instance;
+    };
+
+    this.onRest = props => {
+      const {
+        state
+      } = this.state;
+
+      if (state === 'enter') {
+        this.props.didEnter(props);
+      } else if (state === 'leave') {
+        this.setState({
+          currentChildren: null,
+          lastChildren: null
+        });
+        this.props.didLeave(props);
+      }
+
+      this.props.onRest(props);
+    };
+
+    this.onStart = props => {
+      const {
+        state
+      } = this.state;
+
+      if (state === 'enter') {
+        this.props.willEnter(props);
+      } else if (state === 'leave') {
+        this.props.willLeave(props);
+      }
+
+      this.props.onStart(props);
+    };
+
+    this.state = {
+      state: '',
+      lastChildren: null,
+      currentChildren: null
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const willUpdateStates = {};
+
+    if (props.children !== state.currentChildren // && (props.children == null || state.currentChildren == null)
+    ) {
+      willUpdateStates.lastChildren = state.currentChildren;
+      willUpdateStates.currentChildren = props.children;
+
+      if (props.children == null) {
+        willUpdateStates.state = 'leave';
+      } else {
+        willUpdateStates.state = 'enter';
+      }
+    }
+
+    if (props.state != null) {
+      willUpdateStates.state = props.state;
+    }
+
+    return willUpdateStates;
+  }
+
+  componentWillUnmount() {
+    if (this.instance) {
+      this.instance.destroy();
+      this.instance = null;
+    }
+  }
+
+  render() {
+    const _a = this.props,
+          {
+      from: propsFrom,
+      enter,
+      leave
+    } = _a,
+          restProps = __rest(_a, ["from", "enter", "leave"]);
+
+    let children; // eslint-disable-next-line prefer-const
+
+    let {
+      currentChildren,
+      lastChildren,
+      state
+    } = this.state;
+    let from = {};
+    let to = {};
+
+    const isControlled = this._isControlled();
+
+    if (isControlled) {
+      children = this.props.children;
+      state = this.props.state;
+    } else if (currentChildren == null && lastChildren == null) {
+      return null;
+    }
+
+    if (state === 'enter') {
+      from = propsFrom;
+      to = enter;
+
+      if (!isControlled) {
+        children = currentChildren;
+      }
+    } else if (state === 'leave') {
+      from = enter;
+      to = leave;
+
+      if (!isControlled) {
+        children = lastChildren;
+      }
+    }
+
+    return /*#__PURE__*/React.createElement(Animation, _Object$assign({}, restProps, {
+      force: true,
+      from: from,
+      to: to,
+      onRest: this.onRest,
+      onStart: this.onStart
+    }), props => // eslint-disable-next-line no-nested-ternary
+    typeof children === 'function' ? children(props) : /*#__PURE__*/isValidElement(children) ? children : null);
+  }
+
+}
+Transition.propTypes = {
+  children: PropTypes.any,
+  from: PropTypes.object,
+  enter: PropTypes.object,
+  leave: PropTypes.object,
+  willEnter: PropTypes.func,
+  didEnter: PropTypes.func,
+  willLeave: PropTypes.func,
+  didLeave: PropTypes.func,
+  state: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+};
+Transition.defaultProps = {
+  willEnter: noop,
+  didEnter: noop,
+  willLeave: noop,
+  didLeave: noop,
+  onStart: noop,
+  onRest: noop
+};

package/lib/es/src/utils/invokeFns.d.ts

@@ -0,0 +1 @@
+export default function invokeFns(fns: any[], args?: any[]): void;

package/lib/es/src/utils/invokeFns.js

@@ -0,0 +1,11 @@
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+export default function invokeFns(fns, args = []) {
+  if (_Array$isArray(fns) && fns.length) {
+    _forEachInstanceProperty(fns).call(fns, fn => {
+      if (typeof fn === 'function') {
+        fn(...args);
+      }
+    });
+  }
+}

package/lib/es/src/utils/noop.d.ts

@@ -0,0 +1 @@
+export default function noop(): void;

package/lib/es/src/utils/noop.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export default function noop() {}

package/lib/es/src/utils/object.d.ts

@@ -0,0 +1 @@
+

package/lib/es/src/utils/string.d.ts

@@ -0,0 +1,2 @@
+export declare function upperCase(str: string, pos: number): string;
+export declare function lowerCase(str: string, pos: number): string;

package/lib/es/src/utils/string.js

@@ -0,0 +1,25 @@
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
+
+/* eslint-disable eqeqeq */
+export function upperCase(str, pos) {
+  if (typeof str === 'string') {
+    var _context;
+
+    return _reduceInstanceProperty(_context = str // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    .split()).call(_context, (total, cur, index) => pos == null || pos === index ? total + cur.toUpperCase() : total + cur, '');
+  }
+
+  return str;
+}
+export function lowerCase(str, pos) {
+  if (typeof str === 'string') {
+    var _context2;
+
+    return _reduceInstanceProperty(_context2 = str // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    .split()).call(_context2, (total, cur, index) => pos == null || pos === index ? total + cur.toLowerCase() : total + cur, '');
+  }
+
+  return str;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@douyinfe/semi-animation-react",
+  "version": "2.0.0-alpha.0",
+  "description": "motion library for semi-ui-react",
+  "keywords": [
+    "motion",
+    "react",
+    "semi-ui"
+  ],
+  "files": [
+    "lib",
+    "README.md"
+  ],
+  "license": "MIT",
+  "main": "lib/es/index.js",
+  "module": "lib/es/index.js",
+  "typings": "lib/es/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DouyinFE/semi-design"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1",
+    "build:lib": "node scripts/compileLib",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs3": "^7.15.4",
+    "@douyinfe/semi-animation": "2.0.0-alpha.0",
+    "@douyinfe/semi-animation-styled": "2.0.0-alpha.0",
+    "classnames": "^2.2.6"
+  },
+  "peerDependencies": {
+    "prop-types": "15.7.2",
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.1"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.15.8",
+    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.14.5",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@vx/gradient": "0.0.199",
+    "del": "^6.0.0",
+    "flubber": "^0.4.2",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "merge2": "^1.4.1",
+    "prop-types": "15.7.2",
+    "react-storybook-addon-props-combinations": "^1.1.0"
+  },
+  "gitHead": "5344f767711f1677a6113bc7fc38d1853bcc7f5a"
+}