height transition is not working

pig800509 commented 4 years ago

      <Table
        rowKey="id"
        columns={columns}
        dataSource={filterTable}
        components={{
          body: {
            wrapper: useCallback((cprops: any) => {
              return (
                <TweenOneGroup
                  component="tbody"
                  leave={[
                    { duration: 250, opacity: 0 },
                    { height: 0, duration: 200, ease: "easeOutQuad" }
                  ]}
                  appear={false}
                  exclusive
                  {...cprops}
                />
              );
            }, [])
          }
        }}
      />

似乎無法顯示出高度的變化, opacity 可正常顯示, ps: 仍然有warning Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

jljsj33 commented 4 years ago

警告没办法解，，暂时官方也没给出针对三方组件取 dom 的方案。。。
table 如果要做动画，，必须舍掉 table 的特性，将要动画的元素设定 display: block；

pig800509 commented 4 years ago

@jljsj33 thanks

vexii commented 3 years ago

Whats the solution to this?

react-component / tween-one

height transition is not working #88