2BChannelCmsBrowser/src/components/Animation/AnimTableBody.js

import React from 'react';
import PropTypes from 'prop-types';
import { TweenOneGroup } from 'rc-tween-one';

const enterAnim = [
  {
    opacity: 0,
    x: 30,
    backgroundColor: '#fffeee',
    duration: 0,
  }, {
    height: 0,
    duration: 200,
    type: 'from',
    delay: 250,
    ease: 'easeOutQuad',
    onComplete: (e) => {
      e.target.style.height = 'auto';
    },
  }, {
    opacity: 1,
    x: 0,
    duration: 250,
    ease: 'easeOutQuad',
  }, {
    delay: 1000,
    backgroundColor: '#fff',
  },
];

const leaveAnim = [
  {
    duration: 250,
    x: -30,
    opacity: 0,
  }, {
    height: 0,
    duration: 200,
    ease: 'easeOutQuad',
  },
];

const AnimTableBody = ({ className, children }) => {
  return (
    <TweenOneGroup
      component="tbody"
      className={className}
      enter={enterAnim}
      leave={leaveAnim}
      appear={false}
    >
      {children}
    </TweenOneGroup>
  );
};

export default AnimTableBody;