移动和扩展图像以填充视口过渡

Posted 2023-02-23

【中文标题】移动和扩展图像以填充视口过渡

【英文标题】：Move and expand image to fill viewport transition

【发布时间】：2017-12-05 23:31:43

【问题描述】：

我正在构建一个过渡，我想在其中放大缩略图以填充点击时的视口。

目前，我根据视口及其大小找到了正确的缩放比例，但我在缩放/展开后在视口中居中图像时遇到了问题。

只有当我使用transform-origin: center center; 并且图像在固定的全屏容器中居中时才会出现问题。 Here is a jsfiddle showing my problem.

我还制作了一个jsfiddle，展示了没有居中的情况。这接近我想要的，除了我希望能够从其他位置而不是左上角转换图像。

这是我目前的代码

// Helper fucntions
const getWindowWidth = () => 
    return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);


const getWindowHeight = () => 
    return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);


// Get element
const El = document.getElementById('test');

// Add listener
El.addEventListener('click', () => 
    // Viewport size
    const viewH = getWindowHeight();
    const viewW = getWindowWidth();

    // El size
    const elHeight = El.offsetHeight;
    const elWidth = El.offsetWidth;

    // Scale ratio
    let scale = 1;

    // Get how much element need to scale
    // to fill viewport
    // Based on https://***.com/a/28475234/1719789 
    if ((viewW / viewH) > (elWidth / elHeight)) 
        scale = viewW / elWidth;
     else 
        scale = viewH / elHeight;
    

    // Center element
    const x = ((viewW - ((elWidth) * scale)) / 2);
    const y = ((viewH - ((elHeight) * scale)) / 2);

    // matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
    El.style.transform = 'matrix(' + scale + ', 0, 0, ' + scale + ', ' + x + ', ' + y + ')';
);

还有一些 CSS：

.Container 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;


#El 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition: transform .3s ease-in-out;

最好的解决方案是获取点击缩略图的当前位置（并不总是居中），然后将其缩放以填满屏幕。但我不确定从哪里开始能够做到这一点。

【参考方案1】：

这是你想要的效果吗？

CSS：

.Container 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;


#test 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  transition: all 3.3s ease-in-out;


#test.rdy
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

JS：

// Helper fucntions
const getWindowWidth = () => 
    return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

const getWindowHeight = () => 
    return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);


const El = document.getElementById('test');
El.addEventListener('click', () => 
    const viewH = getWindowHeight();
    const viewW = getWindowWidth();
    const elHeight = El.offsetHeight;
    const elWidth = El.offsetWidth;

    let scale = 1;

    if ((viewW / viewH) > (elWidth / elHeight)) 
        scale = viewW / elWidth;
     else 
        scale = viewH / elHeight;
    

    El.style.width = elWidth * scale + 'px';
    El.style.height = elHeight * scale + 'px';

    //Add .rdy class in case that position needs resetting :)
    document.getElementById('test').className += ' rdy';
);

//A hack to make height transition work :)
window.onload = function()
    El.style.height = El.offsetHeight + 'px';
;

【讨论】：

感谢您的回答。这有点像我正在寻找的效果，但我需要保持正在展开的缩略图的比例。

@lassemt 更新了，让我知道这是不是你一直在寻找的 :)

抱歉回答迟了，忙于考试。您的解决方案运行良好。我最终使用 GSAP 进行扩展，因为我还需要这个库来做其他事情。这样就解决了我在使用变换而不是使用宽度和高度缩放元素时的居中问题。