ビューポートトランジションを塗りつぶすためにイメージを移動して展開する

Question

クリック時にビューポートを埋めるためにサムネイルを拡大するトランジションを構築しています。

現在、ビューポートとそのサイズに基づいて適切なスケール比を求める計算が正しく行われていますが、拡大/縮小後にビューポートに画像をセンタリングする際に問題があります。

transform-origin: center center;を使用しているときに問題が発生し、イメージが固定フルスクリーンコンテナの中央に表示されます。 Here is a jsfiddle showing my problem.

jsfiddleは、どのようにセンタリングされていないかを示しています。これは、私が望むものに近いですが、イメージを左上のコーナーではなく他のポジションからトランジションすることができることを除きます。

.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; 
} 

最善の解決策は、クリックされたサムネイル（常に中央にない）の現在位置を取得してから、次のようになります。ここでは

は、私が持っているコードは、これまで

// 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://stackoverflow.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ですそれは画面を満たすためにそれを拡大します。しかし、私はそれができるようになるためにどこから始めるべきか本当に分かりません。

Answer 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'; 
};