从相对于图元的原点制作覆盖动画

Question

我正在尝试设置覆盖的动画，以便从触发覆盖的UI元素扩展到全屏。例如，我有一个按钮，当单击它时会显示覆盖，我希望覆盖从按钮展开(在按钮上方或下方，在这一点上不重要)。

我现在用的是类似于这个问题的第二个答案。问题是position: fixed规则从文档流中删除了覆盖(本例中为#box)，因此定位是相对于整个文档的。

所以我想问题是，是否可以保持流量，或者使用相对定位来实现期望的结果？目前，我能想到的唯一解决方案是使用JS在加载时适当设置transform: translate的位置，并调整大小以匹配按钮位置。如果有一种更优雅的方式来实现这一点，我会很高兴。

编辑：下面的代码几乎是从上面的问题中逐字逐句提取出来的，我想添加一个button或类似的交互元素，使动画相对源于它的位置，而不是视口。

document.getElementById('box').addEventListener('click', (e) => e.target.classList.toggle('fullscreen'));

#box {
position: fixed;
cursor: pointer;
background-color: red;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
transform: translate(50px, -50px) scale(0.1);
transform-origin: left bottom;
transition: all 0.7s ease;
}
#box.fullscreen {
transform: translate(0, 0) scale(1);
}

<div id="box"></div>

编辑：仔细想想，动画背景的改变，比如radial-gradient也可以，我只需要隐藏元素，直到动画完成，但这可能是一个选项。动画起源于全屏效果是其中的重要组成部分。如果我在此期间取得任何实质性进展，将更新。非常感谢您的任何意见！

Answer 1

好的，我做了一些更改，它应该可以按照您的意愿工作。一定要阅读评论，这样你才能理解想法。

$(".expand").on("click", function() {
var rect = this.getBoundingClientRect();
var box = $("#box");
// make sure that the position of the overlay start from the clicked element
box.css({ left:rect.left , top: rect.top + rect.height }); 

box.toggleClass("fullScreen").delay(500).queue(function() {
box.css({ left:0 , top: 0 }); // the toggle finished then reset the left and top so it overlay the whole screen 
});
});

/* YOUR BOX */
#box{
position: fixed;
cursor: pointer;
background-color: red;
/* make the box full screen */
/* scale it down to 0.1 (10%) initially,
make an offset from bottom left */
-ms-transform: translate(0px, 0px) scale(0.1); /* IE9 */
-ms-transform-origin: left top; /* IE9 */
transform: translate(0px, 0px) scale(0.1);
transform-origin: left top;
width:0;
height:0;
overflow:hidden;
/* smooth transition (IE10+) */
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
/* ADD THIS CLASS WITH JS */
#box.fullScreen {
width: 100vw; /* IE9+ */
height:100vh; /* IE9+ */
-ms-transform: translate(0px, 0px) scale(1); /* IE9 */
transform: translate(0px, 0px) scale(1);
}
.expand{
margin:auto;
width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand">Click Me</div>
<div id="box">your content</div>