动态创建具有绝对的位置，这可以扩展到整个屏幕的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; 
 
}