Есть ли способ анимировать фильтрацию контента, который использует отображение: нет? - PullRequest
Новая
       26

Есть ли способ анимировать фильтрацию контента, который использует отображение: нет?

0 голосов
/ 03 апреля 2019

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

https://www.w3schools.com/howto/howto_js_filter_elements.asp

Это прекрасно работает, но я столкнулся с проблемой, которая связана с тем, что я не совсем понимаю JS, включенный в пример ссылки. Класс «show» добавляется и удаляется для фильтрации содержимого, но из-за того, что он зависит от display:none и display:flex, он не может быть анимирован и в настоящее время визуально резок.

Я пытался использовать высоту, ширину, непрозрачность и видимость, но, как вы можете себе представить, без display:none у меня остались огромные пространства на моем сайте. Вот грубая скрипка, показывающая мое портфолио и то, как я настроил динамический контент и фильтрацию.

https://jsfiddle.net/qc35ghpd/

Ниже приведен JS с сайта w3schools. 

<style>
.filterDiv {
  opacity: 0;
  transition: opacity 1s ease 0s;
  display: none;
}

.show {
  opacity: 1;
  transition: opacity 1s ease 0s;
  display:flex;
}
</style>
<script>
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}
</script>

Результаты, которые я получаю, ожидаются, поэтому я действительно ищу способ изменить приведенный выше код, который бы позволял анимацию между переключениями display:flex и display:none.

.
...