css网格儿童比例过渡/动画

Question

我试图在点击 CSS 网格时缩放子元素的大小，但没有成功。问题是我实际上没有缩放它，我只是更改了列和行位置以填充所有网格。

div {
      width: 100%;
      height: 140px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-gap: 20px;
  }


div:active {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 4;
    height: 140px; //the size of the grid is 140px just because it doesn't work if you do 100%
    z-index: 3;
 }

正如您所看到的，结果不是最好的，它们似乎没有“缩放”，而只是从顶部下降。我尝试使用 css grid，但我不知道这是否是最好的方法（css grid 而不是 flexbox）。

Answer 1

尝试添加一个在父级活动上具有绝对位置的内部元素。

.box {
    width: 100%;
    height: 140px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
    position: relative;
}

.inner-child {
  height: 100%; width: 100%;
}

.element:nth-child(1) .inner-child {background: #ff0000}
.element:nth-child(2) .inner-child {background: #ffe600}
.element:nth-child(3) .inner-child {background: #14ff00}
.element:nth-child(4) .inner-child {background: #00fff0}
.element:nth-child(5) .inner-child {background: #001aff}
.element:nth-child(6) .inner-child {background: #d400ff}

.element:active .inner-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

<div class="box">
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
</div>

对于动画，我们必须添加一个脚本。

setTimeout(function(){ // need to whati untill grid loads.
  let gridWidth = $('.box').width();
  let gridHeight = $('.box').height();
  
  $('.element').each(function () {
    let elementW = $(this).width();
    let elementH = $(this).height();    
    let thisP = $(this).position();

    $(this).find('.inner-child').css({'left': thisP.left + 'px', 'right': gridWidth - (elementW + thisP.left) + 'px', 'top': thisP.top + 'px', 'bottom': gridHeight - (elementH + thisP.top) + 'px'});

  });

}, 200);

.box {
    width: 100%;
    height: 140px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
    position: relative;
}

.inner-child {
  position: absolute;
  z-index: 1;
  transition: all .5s ease;
}

.element:nth-child(1) .inner-child {background: #ff0000}
.element:nth-child(2) .inner-child {background: #ffe600}
.element:nth-child(3) .inner-child {background: #14ff00}
.element:nth-child(4) .inner-child {background: #00fff0}
.element:nth-child(5) .inner-child {background: #001aff}
.element:nth-child(6) .inner-child {background: #d400ff}

.element:active .inner-child {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 100;
}

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<div class="box">
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
  <div class="element">
    <div class="inner-child">
    </div>
  </div>
</div>