Сетка видео, анимированный зум на одном, сохранить структуру остальных? - PullRequest
Новая
       7

Сетка видео, анимированный зум на одном, сохранить структуру остальных?

0 голосов
/ 27 августа 2018

Я получил сетку видео 4х4 и создал щелчок для увеличения видео. Но когда я использовал анимацию, чтобы изменить положение кликаемого видео, остальная часть сетки меняет структуру.

Как я могу сказать другим видео остаться на месте или добавить местный тег 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+ */
}

1 Ответ

0 голосов
/ 28 августа 2018

Изменено расположение строк в соответствии с этим предложением 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;
}
...