我正在尝试创建这样的东西：

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

最佳答案 这是一个演示,它展示了如何动态地执行此操作,如果您点击垃圾邮件点击它会有一些问题,但是如果您在完成动画之前禁用点击处理程序,它们将无关紧要.或者你可以缓存边界值(你可能只想避免一些回流),但具体情况可能会发生很大变化,具体取决于您使用此效果的网站.

此外,我没有实现缩小效果,但我认为基于增长效果,如何做到这一点可能相当明显.

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