動態創建具有絕對的位置，這可以擴展到整個屏幕的div

Question

我試圖創造一些這樣的： https://tympanus.net/Development/FullscreenLayoutPageTransitions/

但我面臨的問題是，我的div是動態的 - 可以是任意數量的來自xhr服務電話。我試圖疊加div，但點擊後，它們不會從它們的位置增長到佔據整個屏幕，而是從左上角這樣增長：

https://codepen.io/anon/pen/vJPNOq。

如何獲得與第一個鏈接相同的效果，即動態列表的計數可能未知？

<div> 
    <h1>Your dashboard</h1> 
    <span class="close">X</span> 
    <section class="parent"> 
    <section>room1</section> 
    <section>room2</section> 
    <section>room3</section> 
    <section>room4</section> 
    <section>room5</section> 
    <sectoin>room6</sectoin> 
    </section> 
</div> 

section section{ 
    width:150px; 
    height:150px; 
    background-color:green; 
    margin:10px; 
    padding:30px; 
    transition:all .5s linear; 
} 

.parent{ 
    position:relative; 
    height:100%; 
    width:100%; 
    background-color:red; 
} 

.expanded{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:999; 
    background-color:red; 
} 

.close{ 
    position:absolute; 
    top:100; 
    right:0; 
    z-index:1000; 
    cursor:pointer; 
} 

$('.parent section').click(function(){ 
    $(this).addClass('expanded'); 
}) 

$('.close').click(function(){ 
    $('.parent section').each(function(){ 
    $(this).removeClass('expanded'); 
    }) 
}) 

Answer 1

這裏有一個演示，告訴您如何可以動態地做到這一點，它有幾個問題，如果您的垃圾郵件單擊它，但如果你禁用單擊處理直到它完成動畫，他們都不會有問題。或者，您可以緩存邊界值（您可能想要避免一些重排），但具體情況可能會有所變化，具體取決於您使用此效果的網站。

另外我沒有實現收縮效果，但我認爲這可能是相當明顯的如何根據增長效果來做到這一點。

const numberOfTiles = 9; 
 
const totalColumns = 3; 
 
const totalRows = Math.ceil(numberOfTiles/totalColumns); 
 

 
const container = document.createElement('div'); 
 
Object.assign(container.style, { 
 
    width: '80vw', 
 
    height: '80vh', 
 
    background: 'rgb(60, 61, 60)', 
 
    transform: 'translate(10vw, 10vh)', 
 
    lineHeight: 1/totalRows * 100 + '%' 
 
}); 
 

 
const tiles = []; 
 
for (let row = 0; row < totalRows; ++row) { 
 
    for (let col = 0; col < totalColumns; ++col) { 
 
    if (tiles.length < numberOfTiles) { 
 
     const tileContainer = document.createElement('div'); 
 
     Object.assign(tileContainer.style, { 
 
     position: 'relative', 
 
     width: 1/totalColumns * 100 + '%', 
 
     height: 1/totalRows * 100 + '%', 
 
     display: 'inline-block' 
 
     }); 
 
     let randomColor = Math.ceil((Math.random() * Math.pow(255, 3))).toString(16); 
 
     while (randomColor.length < 6) { 
 
     randomColor = '0' + randomColor; 
 
     } 
 
     randomColor = '#' + randomColor; 
 
     const tile = document.createElement('div'); 
 
     tile.classList.add('tile'); 
 
     Object.assign(tile.style, { 
 
     width: '100%', 
 
     height: '100%', 
 
     background: randomColor, 
 
     willChange: 'transform, left, top' 
 
     }); 
 
     tile.addEventListener('click', (evt) => { 
 
     if (tile.classList.toggle('fullscreen')) { 
 
      let clientRect = tile.getClientRects(); 
 
      Object.assign(tile.style, { 
 
      position: 'absolute', 
 
      width: clientRect.width + 'px', 
 
      height: clientRect.height + 'px', 
 
      left: clientRect.left + 'px', 
 
      top: clientRect.top + 'px', 
 
      transition: '1s width, 1s height, 1s transform, 1s left, 1s top', 
 
      zIndex: 100 
 
      }); 
 
      setTimeout(() => { 
 
      let clientRect = tile.getBoundingClientRect(); 
 
      Object.assign(tile.style, { 
 
       left: 0, 
 
       top: 0, 
 
       width: '100vw', 
 
       height: '100vh', 
 
       transform: `translate(${-clientRect.left}px, ${-clientRect.top}px)` 
 
      }); 
 
      }, 0); 
 
     } else { 
 
      Object.assign(tile.style, { 
 
      width: '100%', 
 
      height: '100%', 
 
      left: 0, 
 
      top: 0, 
 
      transform: '', 
 
      zIndex: 1 
 
      }); 
 
      setTimeout(() => { 
 
      Object.assign(tile.style, { 
 
       zIndex: 0 
 
      }); 
 
      }, 1000); 
 
     } 
 
     }); 
 
     tiles.push(tile); 
 
     tileContainer.appendChild(tile); 
 
     container.appendChild(tileContainer); 
 
    } 
 
    } 
 
} 
 

 
document.body.appendChild(container);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
}