从相对于元素的原点动画叠加

Question

我正在尝试对叠加层进行动画处理，以从触发叠加层的 UI 元素扩展到全屏。例如，我有一个按钮，当单击它时会显示一个叠加层，我希望叠加层从按钮展开（在按钮上方或下方，此时并不重要）。

我目前正在使用类似于this question 上的第二个答案的东西。问题是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>