Javascript 可缩放、可调整大小的柔性网格

我有基于flex的网格，包含5x5个元素。中间的3x3网格是可点击的，点击元素使它变成背景红色，并调整宽度和高度。其他元素正在调整大小以适应此中心元素

以下是代码笔的链接：

现在，我想在单击后缩放到中心红色元素和8个周围元素-因此只有9个元素可见。接下来，当我更改中心元素时，查看更改并单击元素和周围的8个元素。其他元素消失了。最后，我只想看到9个元素并在它们周围移动

我试图更改显示和不透明度，但动画并不平滑

---

也许你们有解决这个问题的方法或想法，或者有什么工具/库可以帮助我实现这个目标？

我注意到，作为用户，我不能点击最外层的元素。考虑到这一点，我的解决方案如下

这并不漂亮，但它只解决了一半的问题——隐藏，而不是缩放

将其添加到javascript的底部。确保在codepen中添加jQuery。另外，基于

---

我正在研究如何做缩放部分。让我再打给你。

单击中心元素后，它会放大到该元素和周围的8个元素，并隐藏网格的其余部分？正确吗？是的，其他元素不正确。请检查我下面的答案，如果这是正确的行为。如果是，我可以继续我的解决方案。是的，作为用户，您不能单击最外面的元素。最后单击这些元素将重新绘制网格。主视图将像那个样，当我点击，例如在基本-基本成为中心的意思是视口。它移动到集装箱中心。不是相邻图元消失，而是相邻图元移动到视图中。在这支笔中，我将最外层的元素显示设置为“无”。

document.getElementById('app').getElementsByClassName('wrapper')[0].addEventListener("click", function(){
  showAll();
  hideOthers();
});

document.addEventListener("dblclick", function(){
  showAll();
});

function hideOthers() {
  var activeChild = $('.wrapper .center-zoom').index() + 1;
  var indexToHide = [18,17,16,15,14,13,12,11,10,9,8,7,3,2];
  hideThese = new Array(26);
  for(i = 0; i < indexToHide.length; i++){
    hideThese[i] = activeChild - indexToHide[i];
  }

  for(j = 14; j < (indexToHide.length) * 2; j++){
    hideThese[j] = activeChild + indexToHide[j-14];
  }

  for (k = 0; k < hideThese.length; k++) {
     var $target = $(".wrapper div:nth-child(" + hideThese[k]+ ")");
     jQuery($target).css('opacity', '0');
  }
};

function showAll() {
  for(i = 0; i <= 25; i++){
    var $target = $(".wrapper :nth-child(" + i + ")");
    jQuery($target).css('opacity', '1');
  }
}