CSS网格过渡到填充屏幕中的静态Div

扎克www

我在CSS网格布局中制作了许多块，如下所示：

$('.box').click(function(){
    $(this).toggleClass("active");
});

.grid-container {
  display: grid;
  grid-template: repeat(10, [row] 1fr) / repeat(14, [col] 1fr);
    grid-gap: 20px;
   height: calc(100vh - 40px);
   width: calc(100vw - 40px);
   margin:20px;
}

.box{
  width:100%;
  height:100%;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 1;
  z-index:1;
  font-size: 10px;
  line-height: 1;
  color: white;
  background-color:#ebebeb;
  
}

.box.active{
  width:100vw;
  height:100vh;
  z-index:50;
}

.item-1 {
  grid-column: col 1 / span 2;
  grid-row: row 1 / span 2;
  background: linear-gradient(to right, #ffb347, #ffcc33);
}

.item-2 {
  grid-column: col 13 / span 2;
  grid-row: row 1 / span 2;
  background: linear-gradient(to right, #ffb347, #ffcc33);
  opacity: 0.8;
}

.item-3 {
  grid-column: col 3 / span 2;
  grid-row: row 8 / span 2;
  background: linear-gradient(to top, #d38312, #a83279);
  z-index: 1;
  opacity: 0.8;
}

.item-4 {
  grid-column: col 1 / span 2;
  grid-row: row 5 / span 2;
  background: linear-gradient(to left, #b3ffab, #12fff7);
}

.item-5 {
  grid-column: col 13 / span 2;
  grid-row: row 9 / span 2;
  background: linear-gradient(to top, #485563, #29323c);
}

.item-6 {
  grid-column: col 4 / span 2;
  grid-row: row 2 / span 2;
  background: linear-gradient(to right, #fe8c00, #f83600);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container">
<div class="box item-1">1</div>
<div class="box item-2">2</div>
<div class="box item-3">3</div>
<div class="box item-4">4</div>
<div class="box item-5">5</div>
<div class="box item-6">6</div>
</div>

当用户单击其中一个彩色框时，我希望它展开并在屏幕上滑动以填充屏幕高度和宽度的100％。

当前，当单击每个框时，它们会分别扩展到100vh和100vw，但是由于它是静态放置在CSS网格上的，因此无法移动它来覆盖屏幕。

如果我在.box.active上使用position：absolute，则过渡不平滑，并且看起来非常难看。如果我在.box上使用position：absolute，那么.box div将不再位于网格中...

是否存在一种优雅的解决方案，以使框保留在网格中，但是单击时展开并移动以填充整个屏幕？任何想法表示赞赏。

围栏铅笔

有点hacky（我摆脱了那个讨厌的jQuery：P），但是给它一个机会...

function bigger() {
  if (this.classList.contains('active')) {
    this.classList.remove('active')
  } else {
    this.classList.add('active');
  }
}
		
const el = document.querySelectorAll('.box');
const elArray = [...el];

elArray.forEach(el => {
  el.addEventListener('click', bigger);
});

.grid-container {
   display: grid;
   grid-template: repeat(10, [row] 1fr) / repeat(14, [col] 1fr);
   grid-gap: 20px;
   height: calc(100vh - 40px);
   width: calc(100vw - 40px);
   margin:20px;
   overflow: hidden;
}
 .box {
   height: 100%;
   width: 100%;
   opacity: 1;
   z-index:1;
   font-size: 10px;
   line-height: 1;
   color: white;
   transition: 1s;
   background-color:#ebebeb;
}
 .box.active {
   transform: scale3d(20, 20, 1);
   transform-origin: center;
   z-index:50;
}
 .item-1 {
   grid-column: col 1 / span 2;
   grid-row: row 1 / span 2;
   background: linear-gradient(to right, #ffb347, #ffcc33);
}
 .item-2 {
   grid-column: col 13 / span 2;
   grid-row: row 1 / span 2;
   background: linear-gradient(to right, #ffb347, #ffcc33);
   opacity: 0.8;
}
 .item-3 {
   grid-column: col 3 / span 2;
   grid-row: row 8 / span 2;
   background: linear-gradient(to top, #d38312, #a83279);
   z-index: 1;
   opacity: 0.8;
}
 .item-4 {
   grid-column: col 1 / span 2;
   grid-row: row 5 / span 2;
   background: linear-gradient(to left, #b3ffab, #12fff7);
}
 .item-5 {
   grid-column: col 13 / span 2;
   grid-row: row 9 / span 2;
   background: linear-gradient(to top, #485563, #29323c);
}
 .item-6 {
   grid-column: col 4 / span 2;
   grid-row: row 2 / span 2;
   background: linear-gradient(to right, #fe8c00, #f83600);
}

<div class="grid-container">
  <div class="box item-1">1</div>
  <div class="box item-2">2</div>
  <div class="box item-3">3</div>
  <div class="box item-4">4</div>
  <div class="box item-5">5</div>
  <div class="box item-6">6</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。