CSS网格儿童比例过渡/动画 [英] css grid children scale transition/animation

问题描述

当您单击css网格时，我正在尝试缩放子级的大小，但未成功.问题是我实际上没有缩放它，我只是更改了列和行的位置以填充所有网格.

I'm trying to scale the size of a children in a css grid when you click it, but I didn't success. The problem is that I actually didn't scale it, I just changed the column and the row position in order to fill all the grid.

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网格，但是我不知道这是否是最好的方法(使用CSS网格而不是flexbox).

As you can see the result is not the best, they don't seems to "scaled" but just coming down from the top. I tried with css grid but i don't know if it's the best way to do that (css grid instead of flexbox).

推荐答案

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

Try to add an inner element with absolute position on parent active.

.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>

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

For animation we have to add a script.

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>

这篇关于CSS网格儿童比例过渡/动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！