Javascript 平滑地设置图像位置和缩放动画，以适应HTML/CSS中的屏幕

我想在点击图像以填充整个屏幕时设置图像动画，使其从原始位置无缝过渡到全尺寸，然后再返回

这里的问题是CSS

position

属性带有

top

和

left

。尝试之后，我想到了使用

transform:scale（）

properties，但这将导致大量的计算，如果可能的话，我希望避免这些计算

我的复杂解决方案是使用

getBoundingClientRect（）

获取元素的原始位置，然后从中找到图像必须位于的结束位置，并在每次使用

element.animate将图像放大到全尺寸时创建自定义动画。我不确定这是最好的方法，因为计算出图像的最终大小和位置将是一些额外的数学，我真的不想搞砸

下面是我当前的标记，一些CSS显示可以使用
translateX（）
和
translateY（）
为位置动画设置关键帧，但不是我真正需要的


document.querySelector（'picture'）。onclick=function（）{
document.querySelector（'picture'）.classList.toggle（'modal'））
}

身材{
保证金：0；
显示：内联块；/*与图像内容保持相同宽度*/
背景色：白烟；
}
img{
最大宽度：100%；/*默认情况下，图像应适合其容器*/
高度：自动；
背景颜色：浅灰色；
保证金：自动；
}
图片.模态{
位置：固定；
排名：0；
左：0；
背景色：黑色；
高度：100vh；
宽度：100vw；
利润率：0；
显示器：flex；
对齐内容：居中对齐；
对象匹配：包含；
}
图片.模态img{
动画名称：slidein；
动画持续时间：1s；
}
@关键帧幻灯片{
0% {
转换：translateX（30px）；
}
100% {
变换：translateX（0）；
}
}
菲卡普顿{
填充：8px；/*匹配Chrome/Edge的默认页边距*/
}
标题
描述
您使用
getBoundingClientRect
朝着正确的方向前进。通过使用这个并对其进行一些计算，我能够得出这个结论


让imageResizing=false；
函数zoomUnzoomImage（resizeEvent）{
如果（！resizeEvent&&this.classList.contains（'zoomed'））{
this.classList.remove（'zoomed'）；
this.style.transform=“”；
document.querySelector（'.image background'）.classList.remove（'zomed'）；
removeZoomOutListeners（）；
RemoveSezeListener（）；
}否则{
让我们来谈谈
如果（调整事件大小）{
imageCordinates=此项；
}
否则{
imageCordinates=getBoundingClientRect（此）；
这._originalImageCordinates=图像cordinates；
}
const deviceRatio=window.innerHeight/window.innerWidth；
常数imageRatio=imageCordinates.height/imageCordinates.width；
//根据设备和图像大小缩放图像
常量imageScale=设备>图像比率？
window.innerWidth/imageCordinates.width：
window.innerHeight/imageCordinates.height；
常量imageX=（（imageCordinates.left+（imageCordinates.width）/2））；
常量imageY=（（imageCordinates.top+（imageCordinates.height）/2））；
constbodyx=（window.innerWidth）/2；
const bodyY=（窗口内部高度）/2；
常量xOffset=（bodyX-imageX）/（imageScale）；
常量yOffset=（bodyY-imageY）/（imageScale）；
this.style.transform=“scale（“+imageScale+”）translate（“+xOffset+”px，“+yOffset+”px）”；
this.classList.add（'zoomed'）；
document.querySelector（'.image background'）.classList.add（'zoomed'）；
registersZoomOutListeners（）；
registerResizeListener（）；
}
}
函数寄存器ZoomoutListeners（）{
//滚动缩小
文档。添加了文本列表器（“滚动”，滚动）；
//缩小逃生范围
文件。添加的监听器（“键控”，escapeClickZoomOut）；
//在单击背景时缩小
document.querySelector（“.image background”）.addEventListener（'click'，backDropClickZoomOut）；
}
函数removeZoomOutListeners（）{
document.removeEventListener（'scroll'，scrollZoomOut）；
文件。删除VentListener（“键控”，escapeClickZoomOut）；
document.querySelector（“.image background”）.removeEventListener（'click'，backDropClickZoomOut）；
}
函数registerResizeListener（）{
addEventListener（'resize'，onWindowResize）
}
函数removeResizeListener（）{
window.removeEventListener（'resize'，onWindowResize）
}
函数scrollZoomOut（）{
if（document.querySelector（'.zoomable image.zoomed'）&&！imageResizing）{
调用（document.querySelector（'.zoomable image.zoomed'）；
}
}
函数backDropClickZoomOut（）{
if（document.querySelector（'.zoomable image.zoomed'））{
调用（document.querySelector（'.zoomable image.zoomed'）；
}
}
函数escapeClickZoomOut（事件）{
if（event.key==“Escape”&&document.querySelector（'.zoomable image.zoomed'））{
调用（document.querySelector（'.zoomable image.zoomed'）；
}
}
函数onWindowResize（）{
imageResizing=true；
if（document.querySelector（'.zoomable image.zoomed'））{
去盎司(
函数（）{
zoomUnzoomImage.call（document.querySelector（'.zoomable image.zoomed'），true）
imageResizing=false；
}, 100)()
}
}
函数getBoundingClientRect（元素）{
var rect=element.getBoundingClientRect（）；
返回{
top:rect.top，
右：右，右，
底部：矩形。