使用滚动从 div 内部展开 div 全屏答案

【问题标题】：Expand a div fullscreen from inside a div with scroll使用滚动从 div 内部展开 div 全屏
【发布时间】：2019-03-07 07:13:49
【问题描述】：

我正在尝试创建一个“复杂”动画，其中旋转木马中的 div（一个在 X 轴上滚动的简单父级）在单击时展开为全屏。

我正在尝试不同的选项，但无法获得结果。

Here the fiddle

实际上我正在尝试隐藏其他并删除溢出，但无法全屏展开节点。我应该使用绝对定位，但这样我无法将 div 定位在水平滚动条中。

document.querySelectorAll(".project").forEach(function(n) {
n.onclick = e => {
console.log("deee", e.clientY, e.clientX);

document.querySelector(".carousel").style.overflowX = "visible";

e.currentTarget.classList.add("opened");
document.querySelectorAll(".project:not(.opened)").forEach(n => {
  n.style.display = "none";
});
return;

}; });

谁能指出我正确的方向？

【问题讨论】：

如何退出“全屏”？顺便说一句，我能想到的最好方法是： 1. 克隆所选元素。 2. 计算可滚动父对象内部的位置 - 将位置转换为视口位置。 3. 将克隆附加到该坐标处的主体。 4. 缩放到全屏。 5. on exit - 将克隆缩小（调整大小）到原始元素坐标，并在动画结束时使用淡出和销毁。

标签： javascript css animation css-transitions

【解决方案1】：

尝试使用 .project.opened 的选择器更改 CSS 中的代码

.project.opened {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

【讨论】：