Анимация стола под нагрузкой с падающими ячейками, похожими на тетрис - PullRequest
Новая
       7

Анимация стола под нагрузкой с падающими ячейками, похожими на тетрис

0 голосов
/ 29 января 2020

Возможно ли, чтобы ячейки таблицы падали с верхней части экрана, чтобы заполнить таблицу при загрузке с использованием анимации jquery / css?

Моя таблица охватывает все представление (15x15 ячеек), с каждым ячейка с уникальным идентификатором.

1 Ответ

1 голос
/ 29 января 2020

что вы пробовали до сих пор?

Возможно basi c пример: используется position, transition и нет id s 

function delay() {
  var AnDelay = 11.25;// longest delay
  for (let e of document.getElementsByClassName("cell")) {
    e.classList.add("reset");
    AnDelay = AnDelay - 0.05;// decrease transition delay
    e.style.transitionDelay = AnDelay + "s";
  }
}
window.onload = delay;
td.cell {
  border: solid;
  padding: 0.2vh;
  position: relative;
  bottom: 150vh;
  right: -20vw;
  transition: 1s;
}
td.cell:nth-child(odd) {
  right: 20vw;
}
td.cell.reset {/* transition delayed to go back to position*/
  bottom: 0;
  right: 0;
}
kbd {/* demo use */
  -moz-appearance: button;
  appearance: button
}
<p>Hit <kbd>run code snippet</kbd> to run it again</p>
<table>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
</table>

Где вы терпите неудачу?

Пожалуйста, предоставьте свой собственный код. Этот ответ больше похож на комментарий.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...