如何使用 react-draggable 和带有 react-transition 组的 material-ui 动画

问题描述

尝试将 react-draggable 与 Material-UI 动画结合使用。

一种方式是这样

        <Draggable>
          <Grow in={checked}>
            <Card className={clsx(classes.abs,classes.paper)}>
              <svg className={classes.svg}>
                <polygon
                  points="0,100 50,00,100,100"
                  className={classes.polygon}
                />
              </svg>
            </Card>
          </Grow>
        </Draggable>

通过这种方式，它基本上可以正常工作，但拖动动画滞后。

另一种方法是将 Draggable 嵌套在 Grow 中

        <Grow in={checked}>
          <Draggable>
            <Card className={clsx(classes.paper)}>
              <svg className={classes.svg}>
                <polygon
                  points="0,100"
                  className={classes.polygon}
                />
              </svg>
            </Card>
          </Draggable>
        </Grow>

在这种情况下，拖动是平滑的，但是，状态被弄乱了。可拖动组件一开始是可见的，切换后它就消失了，永远不会回来。

解决方法

事实证明，解决方案比我想象的要简单。

首先是 Grow，然后是 div，然后是 Draggable.

        <Grow in={checked}>
          <div>
            <Draggable>
              <Card className={clsx(classes.paper)}>
                <svg className={classes.svg}>
                  <polygon
                    points="0,100 50,00,100,100"
                    className={classes.polygon}
                  />
                </svg>
              </Card>
            </Draggable>
          </div>
        </Grow>

有时你只需要睡觉。