search

react-component / tween-one

Animate One React Element
https://tween-one.vercel.app/
MIT License
380 stars 30 forks source link

rc-tween-one 3.x: Table animations #126

Closed ernesto-reify closed 3 years ago

ernesto-reify commented 3 years ago

Hi,

I am trying out rc-tween-one 3.x, because I need compatibility with AntD 4.x, but I'm not being able to animate an AntD Table.

I'm following this example: https://motion.ant.design/exhibition/demo/table-enter-leave, by creating a TweenOneGroup in Table.components.body.wrapper.

I'm getting an error from the TweenOne child components: TweenOne domRef is error, and animations are not working. As seen in the React plugin for Chrome: image

Is there a way to solve this issue? Would you have an example on animating an AntD 4.x table?

jljsj33 commented 3 years ago

table bodyRow is not forwardRef，，，https://github.com/react-component/table/blob/master/src/Body/BodyRow.tsx

jljsj33 commented 3 years ago

or by children create tbody, https://github.com/react-component/tween-one/blob/3.x/docs/examples/useInTable.tsx#L53

jljsj33 commented 3 years ago

https://tween-one-git-3x-react-component.vercel.app/, useInTable

ernesto-reify commented 3 years ago

or by children create tbody, https://github.com/react-component/tween-one/blob/3.x/docs/examples/useInTable.tsx#L53

Hi, thanks for your help in this, and sorry for the delay in responding.

Why does this work? Is tbody honoring the ForwardRef?

Does the fact that we are generating multiple tbody children not pose any problem for the HTML table?

I am still having some issues on putting this to work, but in my case it is due to the whole table being re-rendered when I remove rows. I don't know exactly why this is happening, as I am using unique keys for the rows.

ernesto-reify commented 3 years ago

I am still having some issues on putting this to work, but in my case it is due to the whole table being re-rendered when I remove rows. I don't know exactly why this is happening, as I am using unique keys for the rows.

I solved this: I was using an inline functional React component, I had to make it a top-level function for the component not to re-render on every change.

jljsj33 commented 3 years ago

Why does this work? Is tbody honoring the ForwardRef? Does the fact that we are generating multiple tbody children not pose any problem for the HTML table?

  1. tbody is a DOM node. It doesn't need forwardRef. this is only a short-term processing method. please follow to antd issues, https://github.com/ant-design/ant-design/issues/31227
  2. no problem. zero or more <tbody> elements, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
jljsj33 commented 3 years ago

The main problem is that antd needs to add forwardRef, which should be handled next week.