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

Question

我有 5x5 元素的基于 flex 的网格。中间的 3x3 网格是可点击的，点击元素使其背景变为红色并调整宽度和高度。其他元素正在调整到这个中心元素的大小。

这里是codepen的链接：codepen

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

我尝试更改 display 和 opacity 但动画不流畅。

也许你们有任何解决方案或想法如何解决这个问题或一些工具/库可以帮助我实现这个目标？

Answer 1

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

它并不漂亮，但它解决了一半的问题（仅隐藏，不缩放）。

将此添加到您的 javascript 的底部。确保在 codepen 中添加 jQuery。另外，here's the working pen 基于your own pen。

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');
  }
}

我正在研究如何进行缩放部分。让我回复你。