Shuffle div при нажатии кнопки

Question

Я пытаюсь перетасовать div нажатием кнопки с анимацией растворения в HTML5.

Пример того, что я ищу, похож на этот сайт

Когда вы будете прокручивать на этой странице, так что будет мало ссылок, например, All, Intro, Solution. Если я нажимаю на любую ссылку, она анимирует и перетасовывает все маленькие деления.

Я пытался создать горизонтальные делители, и при нажатии кнопки я могу скрыть их, но это не работает, как этот:

DEMO

Я пытался перетасовать нажатие кнопки следующим кодом:

function shuffle(){
document.getElementById("b").style="display: none";
document.getElementById("a").style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 500ms ease 0s, transform 300ms ease 0s;";
}

Он скрывает первый div, но не применяет анимацию к другим.

Answer 1

Таким образом, отчасти проблема в том, что display: none не переходит и немедленно скрывает ваш элемент. Возможно, вы захотите установить для этого тайм-аута время после завершения свойств перехода.

Я собрал быстрый и грязный CodePen, который выполняет базовую c реализацию "shuffle".

Примечания:

• Это ни в коем случае не идеально и потребует некоторого изящества, чтобы все это работало должным образом.

• В зависимости от вашей реализации может быть лучше .filter() ваших данных и затем применить эффект перехода. Это скорее реализация эффекта, чем строго сортировка.

https://codepen.io/hollyos/pen/gOaYQrz?editors=0110

В этом примере Я использую flexbox для общего макета, а затем использую transition с transform и width для воссоздания эффекта минимизации по центру. Важно не забыть установить transform-origin в соответствии с желаемым местоположением "эффекта закрытия"

CSS

.sorted-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
    background: #CCC;
    box-shadow: 0 2px 8px 1px rgba(33, 33, 33, 0.4);
    height: 150px;
    width: 25%;
    transform-origin: center center;
    transition: transform 0.45s ease, width 0.45s ease;

    &.hidden {
      transform: scale(0);
      width: 0;
    }

    &.d-none {
      display: none;
    }
  }
}

JS

const resetItem = (element) => {
  element.classList.remove('d-none');

  // Slight delay to allow for the element to be "added" back in
  setTimeout((scopedElement) => {
    scopedElement.classList.remove('hidden');
  }, 1, element);
};

const hideItem = (element) => {
  element.classList.add('hidden');

  // Delay display: none, since it doesn't transition.
  setTimeout((scopedElement) => {
    scopedElement.classList.add('d-none');
  }, 300, element);
}

(function() {
  const nav = document.querySelector('nav');

  nav.addEventListener('click', (event) => {
    const { group } = event.target.dataset;

    // A catch-all for anything that's not group related to reset the list sort.
    if (!group) {
      document.querySelectorAll('.sorted-list > li').forEach(resetItem);

      return;
    }

    // Ensure "visible" elements are visible
    document.querySelectorAll(`.sorted-list > .group-${group}`).forEach(resetItem);

    // Hide all other elements
    document.querySelectorAll(`.sorted-list > li:not(.group-${group})`).forEach(hideItem);
  });
})();

Answer 2

На сайте мало что происходит. Убедитесь, что произошло:

У вас есть правильная структура данных объектов, чтобы вы могли отфильтровать содержимое что-то вроде

[{"type": "intro" "elmid": "кое-что"}]

1. Создание двух классов: один для скрытия, один для отображения, добавление анимации позиции с задержкой для всех элементов
2. Фильтрация содержимого с помощью Array.filter и добавление или удаление классов.
3. Сделайте так, чтобы Suore добавлял в родительский список событий, а не каждый элемент для Performance.

, если вы откроете их Страница Это то, что они делают ..