Question

我正在尝试在五列网格和三列网格之间过渡，同时隐藏其他元素。过渡无法正常工作。

我已经使用JavaScript在两者之间实现了硬过渡，但是我不确定使用CSS网格如何实现。

function setTransition(elem) {
  document.getElementById(elem).className = "grid-container-small";

  x = document.getElementsByClassName('tohide')

  while (x.length > 0) {
    x[0].className = 'hidden';
  }

  document.getElementById('O').className = "newori";
  document.getElementById('A').className = "grid-item c02r01";
  document.getElementById('C').className = "grid-item c01r02";
  document.getElementById('F').className = "grid-item c03r02";
  document.getElementById('H').className = "grid-item c02r03";
}

rect {
  fill: rgb(235, 235, 235);
  stroke: rgb(221, 222, 222);
}

#gridbox {
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

#gridbox.transition {
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

.origin {
  grid-column-start: 3;
  grid-row-start: 3;
}

.newori {
  grid-column-start: 2;
  grid-row-start: 2;
}

.c02r01 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.c02r02 {
  grid-column-start: 2;
  grid-row-start: 2;
}

.c02r03 {
  grid-column-start: 2;
  grid-row-start: 3;
}

.c01r02 {
  grid-column-start: 1;
  grid-row-start: 2;
}

.c03r02 {
  grid-column-start: 3;
  grid-row-start: 2;
}

.c03r01 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.c03r02 {
  grid-column-start: 3;
  grid-row-start: 2;
}

.c03r03 {
  grid-column-start: 3;
  grid-row-start: 3;
}

.c03r04 {
  grid-column-start: 3;
  grid-row-start: 4;
}

.c03r05 {
  grid-column-start: 3;
  grid-row-start: 5;
}

.c01r03 {
  grid-column-start: 1;
  grid-row-start: 3;
}

.c02r03 {
  grid-column-start: 2;
  grid-row-start: 3;
}

.c04r03 {
  grid-column-start: 4;
  grid-row-start: 3;
}

.c05r03 {
  grid-column-start: 5;
  grid-row-start: 3;
}

.grid-container-full {
  display: inline-grid;
  grid-template-columns: 178px 84px 84px 84px 178px;
  grid-template-rows: 54px 84px 84px 84px 178px;
  padding: 1px;
}

.grid-container-small {
  display: inline-grid;
  grid-template-columns: 178px 84px 178px;
  grid-template-rows: 54px 84px 178px;
  padding: 1px;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.hidden {
  max-height: 0px;
  max-width: 0px;
  overflow: hidden;
}

<div id="gridbox" class="grid-container-full">
  <!-- box centered at origin -->
  <div id="O" class="origin" onclick='setTransition("gridbox");'>
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect height="64" width="64" x="37" y="-32" transform="rotate(45)" />
    </svg>
    <!-- boxes around origin on axes -->
  </div>
  <div id="A" class="grid-item c03r01">C3R1<br>->C2R1</div>
  <div id="B" class="grid-item c03r02 tohide">C3R2</div>
  <div id="C" class="grid-item c01r03">C1R3<br>->C1R2</div>
  <div id="D" class="grid-item c02r03 tohide">C2R3</div>
  <div id="E" class="grid-item c04r03 tohide">C4R3</div>
  <div id="F" class="grid-item c05r03">C5R3<br>->C3R2</div>
  <div id="G" class="grid-item c03r04 tohide">C3R4</div>
  <div id="H" class="grid-item c03r05">C3R5<br>->C3R3</div>
</div>

没有应用于#gridbox的过渡。

如何为CSS网格中的过渡设置动画？

0 个答案: