动态创建具有绝对位置的 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;
}