[英]How to use react-draggable with material-ui animations with react-transition group
Trying to use react-draggable with material-UI animations.尝试将 react-draggable 与 material-UI 动画一起使用。
One way is like this一种方法是这样的
<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>
This way it mostly works fine however the drag animation lags.这样它大部分工作正常,但阻力 animation 滞后。
Another way is to nest Draggable
inside Grow
另一种方法是将
Draggable
嵌套在Grow
中
<Grow in={checked}>
<Draggable>
<Card className={clsx(classes.paper)}>
<svg className={classes.svg}>
<polygon
points="0,100 50,00, 100,100"
className={classes.polygon}
/>
</svg>
</Card>
</Draggable>
</Grow>
In this case, dragging is smooth, however, the state is being messed up.在这种情况下,拖动很顺利,但是 state 被搞砸了。 The draggable component is visible at first, after toggling it goes away and never comes back.
可拖动组件一开始是可见的,在切换后它会消失并且永远不会回来。
Well turns out the solution is simpler than I thought.事实证明,解决方案比我想象的要简单。
First goes the Grow
then put a div
then the Draggable.
首先是
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>
Sometimes you just need to sleep.有时你只需要睡觉。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.