collapse table rows with animations

hello and thank you for you job.
I have a question please help me if you had time.

I have created a table that when user clicks on one of it's rows another table will open below it .
this is my code:

`import React from 'react';
import Table from 'rc-table';
import 'rc-table/assets/index.css';

import Animate from 'rc-animate';
import 'rc-table/assets/animation.css';
const AnimateBody = props => <Animate transitionName="move" component="tbody" {...props} />;

class BillList extends React.Component{

columns = [
{ title: 'code', dataIndex: 'code', key: 'a', width: 100 },
{ title: 'date', dataIndex: 'date', key: 'b', width: 100 },
{ title: ' amount', dataIndex: 'amount', key: 'c', width: 100 },
{ title: 'status', dataIndex: 'status', key: 'x', width:100 },
];

tableData = [
{ key: 0, code: '123',date:'1/12/97', amount:'20,000', status:' no' },
{ key: 1, code: '123',date:'1/12/97', amount:'20,000', status:' yes' },
{ key: 2, code: '123',date:'1/12/97', amount:'20,000', status:' no' },
{ key: 3, code: '123',date:'1/12/97', amount:'20,000', status:' yes' },
{ key: 4, code: '123',date:'1/12/97', amount:'20,000', status:' no' },
{ key: 5, code: '123',date:'1/12/97', amount:'20,000', status:'yes' },
];

sub_columns = [
{ title: 'name', dataIndex: 'name', key: 'a', width: 100 },
{ title: 'phi', dataIndex: 'phi', key: 'b', width: 100 },
{ title: 'value ', dataIndex: 'masraf', key: 'c', width: 100 },
{ title: 'total value ', dataIndex: 'kol', key: 'x', width:100 },
];

sub_tableData = [
{ key: 0, name: 'cpu',phi:'100,000', masraf:'60,000', kol:'50,000' },
{ key: 1, name: 'ram',phi:'100,000', masraf:'60,000', kol:'50,000' },
{ key: 2, name: 'disk',phi:'100,000', masraf:'60,000', kol:'50,000' },
];

render(){
const subTable = ()=>{
return (
<Table
style={{background:"yellow"}}
columns={this.sub_columns}
data={this.sub_tableData}
components={{
body: { wrapper: AnimateBody },
}}/>
)
}
return(

<Table
expandIconAsCell={false}
expandRowByClick={true}
expandedRowRender={record => subTable(record)}
columns={this.columns}
data={this.tableData}

    />
  </div>
)

}
}

export default BillList`

this works good for me but I want table to expand with animation like slideUp and slideDown in jquery.
another example would be this:
https://codepen.io/ayoungh/pen/xqRbeR

can you please tell me how can I add animation to my table?

thanks again

Start with the provided React example, focusing on expandedRowRender, AnimateBody, rc-table, and rc-animate; compare its behavior with the linked CodePen example. Done means the table's expanded and collapsed rows visibly animate in the requested slideUp and slideDown style.