蚂蚁设计表格通过React Spring进行验证

Question

我已经尝试通过react-spring来改善我的ant-design ui， 但是当我使用带有react-spring [useTrail]的ant form组件时， 每次我在表单项中键入内容时，输入都会变得模糊，导致组件验证数据。 有谁可以指导我以一种优雅的方式解决这个问题？

const [toggle, set] = useState(true);

const config = { mass: 12, tension: 2000, friction: 200 };

const items = [
    () => <h1 className="title">Welcome!</h1>,
    () => <Form.Item label={`email`}>
      {getFieldDecorator("email", {
        validateFirst: true,
        rules: [
          { type: `email`, message: `please enter the correct email` },
          { required: true, message: `please enter email` }
        ]
      })(
        <Input size="large" prefix={<Icon type="mail" />} />
      )}
    </Form.Item>
];

const trail = useTrail(items.length, {
    config,
    opacity: toggle ? 1 : 0,
    x: toggle ? 0 : 40,
    from: { opacity: 0, x: 40 }
  });

<Form onSubmit={handleSubmit} className="login-form">
      {trail.map(({ height, x, ...rest }, index) => {
        const Item = items[index];
        return (
          <animated.div className={`cp-form-item`}
                        style={{ ...rest, transform: x.interpolate(x => `translate3d(0,${x}px,0)`) }}>
            <Item />
          </animated.div>
        );
      })}
    </Form>

非常感谢！