react-component/tween-one

rc-tween-one 3.x: Table animations

ernesto-reify opened this issue · 7 comments

ernesto-reify commented

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?

ernesto-reify commented

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

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

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, ant-design/ant-design#31227
  2. no problem. zero or more <tbody> elements, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
  • 👍1
jljsj33 commented

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

  • 👍1