如何缩放多个 div 并留在容器内？

Question

我正在构建一个网格 UI，用户应该可以在其中单击单元格来缩放它们。

期望的行为：

单元格应该不超出容器并被裁剪*。
单元格可以与其他单元格重叠（缩放时）。
（一次只需要缩放一个单元格。这不是我们的主要关注点）。

*左：不需要的行为（部分单元格 O 已消失）。 右：期望的行为

我的做法：

显然，我可以同时transform: scale() translate()，以达到想要的结果。您可以使用 cell N (translateY(22px)).

来查看

问题：

这种方法不能很好地扩展到 9 个单元格（更不用说 90 个，这是我的实际用例）。

容器必须是overflow: hidden。滚动等不是一个选项。

我的问题：

这感觉像是一个非常粗略的尝试来解决一些必须有人已经通过编程解决的问题。

是否有更好的方法来构建这样的 UI？（我对插件或其他方法持开放态度）。

如果没有，在 jQuery 中编写脚本的好方法是什么？

$(function() {
$(".cell").click(function() {
    $(this).toggleClass("zoom-in");
  });
});

.grid {
  width: 300px;
  height: 300px;
  background: gray;
  overflow: hidden;
}

.cell {
  background: tomato;
  width: 30%;
  height: 30%;
  margin: 5px;
  float: left;
  text-align: center;
  z-index: 999;
  transition: all 0.2s ease-in-out;
}

.zoom-in {
  transform: scale(2);
  transition: all 0.2s ease-in-out; 
}

#nord {
  background-color: white;
}
#nord.zoom-in {
  transform: scale(2) translateY(22px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div> Click white and red cells to scale. Click again to revert.</div>
<div class="grid">
  <div class="cell">NW</div>
  <div id="nord" class="cell">N</div>
  <div class="cell">NO</div>
  <div class="cell">W</div>
  <div class="cell">C</div>
  <div class="cell">O</div>
  <div class="cell">SW</div>
  <div class="cell">S</div>
  <div class="cell">SO</div>
</div>

Answer 1

我创建了类似的东西作为概念验证。我认为这可能会帮助您指明正确的方向。在此处查看演示：https://codepen.io/RTakes/pen/aWejOy

这就是我在缩放时处理居中的方式。它从当前位置计算动画到的位置。

function computeCenterPosition(element, sizeFactor = 0) {
  const screenCenter = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2
  };

  const elCenter = {
    x: (element.offsetWidth / 2) + element.offsetLeft,
    y: (element.offsetHeight / 2) + element.offsetTop
  };

  return {
    x: (elCenter.x - screenCenter.x) * -1,
    y: (elCenter.y - screenCenter.y) * -1
  }
}

Answer 2

我已经设置了一个函数来评估单元格是否靠近网格的边界（任何边界）。如果是这种情况，请在单元格上注入样式，设置变换样式属性，使其在缩放时沿边框的相反方向移动。

这是一种快速而肮脏的方法，显然还有改进的余地。

$(function() {
$(".cell").click(function() {
    $(this).toggleClass("zoom-in");
  });
});

document.addEventListener('DOMContentLoaded', setEvent, false);

function setEvent () {
    var elements = document.getElementsByClassName('cell');
    var grid = elements[0].parentElement;

    var gridWidth = grid.clientWidth;
    var gridHeight = grid.clientHeight;
    var maxGrid = {
        right: gridWidth,
        bottom: gridHeight
    }

    

    for (var n = 0; n < elements.length; n++) {
        evaluate (elements[n], maxGrid);
    }
}

function evaluate (element, maxGrid) {

    var transOrigin = "";

    var left = element.offsetLeft;
    if (left < element.clientWidth) {
        transOrigin += 'left ';
    }
    if (left + element.clientWidth > maxGrid.right - element.clientWidth) {
        transOrigin += 'right ';
    }


    var top = element.offsetTop;
    if (top < element.clientHeight) {
        transOrigin += 'top';
    }
    if (top + element.clientHeight > maxGrid.bottom - element.clientHeight) {
        transOrigin += 'bottom';
    }


    element.style.transformOrigin = transOrigin;
}

.grid {
  width: 300px;
  height: 300px;
  background: gray;
  overflow: hidden;
  position: relative; /* important to have this */
}

.cell {
  background: tomato;
  width: 30%;
  height: 30%;
  margin: 5px;
  float: left;
  text-align: center;
  z-index: 999;
  transition: all 0.2s ease-in-out;
}

.zoom-in {
  transform: scale(2);
  transition: all 0.2s ease-in-out; 
}

#nord {
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div> Click white and red cells to scale. Click again to revert.</div>
<div class="grid">
  <div class="cell">NW</div>
  <div id="nord" class="cell">N</div>
  <div class="cell">NO</div>
  <div class="cell">W</div>
  <div class="cell">C</div>
  <div class="cell">O</div>
  <div class="cell">SW</div>
  <div class="cell">S</div>
  <div class="cell">SO</div>
</div>

如何缩放多个 div 并留在容器内？

How to scale multiple divs and stay inside of container?

html

css

jquery

scale

css-transforms