使Material-UI对话框从另一个组件转换

Question

我有一张图片，当点击它打开一个材质对话框时，我希望对话框来自图像所在的任何地方。

我正在尝试用转换起源做一些事情并发展过渡，但我不确定我是否朝着正确的方向前进：

class ImagePopup extends Component<Props>{
    popupTransition(props) {
        return <Grow
            {...props}
            style={{ transformOrigin: '1000px -500px 0' }}
            {...(true ? { timeout: 500 } : {})} />;
    }

    render() {
        return <Dialog TransitionComponent={this.popupTransition} onClose={this.props.close} open={this.props.previewImage}> <DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
            <DialogContent>
                <DialogContentText id="alert-dialog-description">
                    Let Google help apps determine location. This means sending anonymous location data to
                    Google, even when no apps are running.
            </DialogContentText>
            </DialogContent>
        </Dialog>
    }
}

我认为剩下的唯一技巧就是在屏幕空间中找出图像的transformOrigin并在popupTransition中设置它。

除此之外，我想让它从图像组件的原始大小过渡到更大的弹出窗口，但我不确定这是否可能以对话框的当前方式工作。

我将如何做到这一点，还是有更好的方法呢？