前几天打算给博客添加一个图片预览的效果，可在网上找了半天也没找到合适的库，于是自己干脆自己手写了个。

最终实现效果如下：

添加遮罩

首先我们需要在点击图片后，生成一个全屏的黑色遮罩来突出我们的图片。这里我们用 createPortal 将遮罩的 DOM 创建到 document.body 下面。

这样点击图片后便会生成一个全屏幕的黑色遮罩。

添加图片

由于需要一个图片逐渐从原位置放大的动画效果，所以并不能简单的直接将图片放大添加到遮罩上面。而是需要先在遮罩上生成一个与原图片位置大小相同的图片。

这样点击图片后便会在原图片的位置上生成一个大小位置相同的图片。

计算动画

接着我们便需要写一个图片逐渐放大、中对齐的动画，这里用 CSS 里的 transform 属性来实现，所以需要计算放大倍数和偏移量，他们分别是 scale 和 translate

scale() 的数值为图片缩放的倍数。我们需要将图片尽量缩放到原先尺寸，并且不能超出屏幕。

translate 的数值为图片在 X 和 Y 轴上的偏移量，我们需要将图片偏移到屏幕中心，所以要求出图片中心点距屏幕中心点的横纵距离

完善代码

最后添加并完善代码

参考链接

Understanding translate after scale in CSS transforms

Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate