时间戳

首页 > 解决方案 > 视频网格，动画放大一个，保持其余部分的结构？

css - 视频网格，动画放大一个，保持其余部分的结构？

问题描述

我有一个 4x4 的视频网格，我创建了一个 onclick 来放大视频。但是当我使用动画改变点击视频的位置时，网格的其余部分会改变结构。

我怎样才能告诉其他视频留在原地，或者添加一个占位符 div？持有人 div 是试图拥有一个占位符。

<div id=row1>
<div id=holder>
<video loop onclick="zoom(this)">
  <source src="01_Isak.m4v" type="video/mp4" />
</video>
</div>
<video loop onclick="zoom(this)">
  <source src="06_Wanda.m4v" type="video/mp4" />
</video>
<video loop onclick="zoom(this)">
  <source src="08_Anneli.m4v" type="video/mp4" />
</video>
<video loop onclick="zoom(this)">
  <source src="17_Annelie.m4v" type="video/mp4" />
</video>

</div>
<div id=row2>

<video loop onclick="zoom(this)">
  <source src="09_Caroline.m4v" type="video/mp4" />
</video>
<video loop onclick="zoom(this)">
  <source src="13_Hanna.m4v" type="video/mp4" />
</video>
<video loop onclick="zoom(this)">
  <source src="12_Åsa.m4v" type="video/mp4" />
</video>
<video loop onclick="zoom(this)">
  <source src="16_Elin.m4v" type="video/mp4" />
</video>

</div>

<script>
function zoom(e) {
        e.classList.toggle('zoom');
}
</script>

和CSS。

@keyframes zoomie {
  0%   { }
  100% {
    z-index: 90;
    width: 75%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.zoom {
  -webkit-animation: zoomie 1s forwards;/* Safari 4+ */
  -moz-animation:    zoomie 1s forwards; /* Fx 5+ */
  -o-animation:      zoomie 1s forwards; /* Opera 12+ */
  animation:         zoomie 1s forwards; /* IE 10+, Fx 29+ */
}

标签： csscss-transforms

解决方案

根据此建议1将行包装器更改为网格布局 

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, min-content) 1fr;
  grid-gap: 10px;
}
.cell {
  border:1px solid #000;
  position: relative;
  background-color: rgba(255,255,255, 0.5);
}
.cell:nth-child(2n){
  grid-column: 2;
}
.cell:nth-child(3n){
  grid-column: 3;
}
.cell:nth-child(4n){
  grid-column: 4;
}
.cell:nth-child(4n) ~ .cell {
  grid-row: 2;
}
.cell:nth-child(8n) ~ .cell {
  grid-row: 3;
}
.cell:nth-child(12n) ~ .cell {
  grid-row: 4;
}

推荐阅读