用JQuery添加类后CSS过渡不起作用

Question

好，所以我试图为图库创建一个过滤器部分。现在，我使用了W3School的一些代码来解决了其中的过滤器部分，但是我还想通过在过滤器更改类时通过缩小和增大其内容的div来动画化图片（不同div中的img）的出现和消失。屏幕上仅显示某些图片。问题是，它们似乎根本不起作用。我只在每个类上使用了transform：scale和transition的计时和简化（一个用于显示，另一个用于隐藏）。

我没有太多的网站建设经验，实际上我是不久前开始的，需要帮助。

$(document).ready(function() {
  $(".lista li a").on('click', function() {
    $(".lista li.selecc").removeClass("selecc");
    $(this).closest('li').addClass("selecc");
  });
});
$(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() >= 200) {
      $('header').addClass('scrolled');
    } else {
      $('header').removeClass('scrolled');
    }
  });
});

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("box");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) AddClass(x[i], "show");
  }
}

function AddClass(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 RemoveClass(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(" ");
}

.box {
  background: rgb(232, 52, 58);
  display: none;
  transform: scale(0);
  -moz-transition: 0.35s all ease;
  -webkit-transition: 0.35s all ease;
}

.show {
  display: block;
  transform: scale(1);
  -moz-transition: 0.35s all ease;
  -webkit-transition: 0.35s all ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="lista">
  <li class="selecc"><a id="todito" class="btn" onclick="filterSelection('all')">TODO</a><span>//</span></li>
  <li><a class="btn" onclick="filterSelection('arquitectura')">ARQUITECTURA PUBLICITARIA</a><span>//</span></li>
  <li><a class="btn" onclick="filterSelection('via')">VÍA PÚBLICA</a><span>//</span></li>
  <li><a class="btn" onclick="filterSelection('exhibidores')">EXHIBIDORES</a><span>//</span></li>
</ul>

<div class="box via"><img src="img/via_publica/lomax_via.jpg" alt="Lomax Via Pública 01"></div>
<div class="box arquitectura"><img src="img/via_publica/loma2_via.jpg" alt="Loma Negra Via Pública 01"></div>
<div class="box exhibidores"><img src="img/via_publica/loma_via.jpg" alt="Lomax Via Pública 02"></div>
<div class="box via"><img src="img/via_publica/sommier_via.jpg" alt="Sommier Center Via Pública 01"></div>