反应中的全屏过渡动画

Question

寻求有关如何处理此动画的帮助：https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFZ3BiM1dnR0ZPU1k/animation_meanigfultrans_visualcont.webm

最初使用 React 路由器的尝试并不顺利，最终决定我不需要为每个开放组件提供专用路由。现在我遇到了定位问题......

圆圈填满了整个屏幕，因此它需要位于 100% x 100% 的 div 中，并且位于 0, 0 处，但网格中的项目需要它们自己的正确位置。目前我在反应组件中使用同位素来布局网格。

如果我将容器 div 更改为 0,0 以便圆圈可以放大，子 div 也会从其原始位置移动。圆圈需要全屏显示，但缩略图要保持原位（直到我告诉它移动）。

我不是要求任何人提供文字代码示例，而是要求从概念上讨论如何解决问题。

Answer 1

圆形动画

这是我尝试创建圆形增长动画。
简要说明发生了什么：

1. 需要一个容器元素（相对定位）。
2. 点击元素（绝对位置）。
3. 在元素上添加点击事件监听器。
4. click 事件创建同级元素（绝对定位）。
5. 将此元素定位在被点击元素的中心。
6. 增加圆圈的大小。

/*document.addEventListener('"DOMContentLoaded', function() {*/
var spesial = document.getElementsByClassName("spesial");
var container = document.getElementsByClassName("container");
var togglecircle = false;

spesial[0].addEventListener('click', function() {
  var circle = document.createElement('div');
  circle.className = "circle"
  container[0].appendChild(circle);
  var size = 0;
  if (this.offsetWidth > this.offsetHeight) {
    size = container[0].offsetWidth;
  } else {
    size = container[0].offsetHeight;
  }
  console.log(this.offsetTop);

  circle.style.top = this.offsetTop + (this.offsetHeight / 2) + "px";
  circle.style.left = this.offsetLeft + (this.offsetWidth / 2) + "px";
  circle.style.width = size * 2 + "px";
  circle.style.height = size * 2 + "px";
});
/*});*/

.container {
  position: relative;
  height: 300px;
  background-color: black;
  overflow: hidden;
}
.spesial {
  z-index: 10;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 50%;
  height: 150px;
  background-color: yellow;
  border: 2px solid #888;
  cursor: pointer;
}
.circle {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  width: 0px;
  height: 0px;
  transition: width 3s, height 3s;
  background-color: yellow;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="spesial">
    <h1>Cool header</h1>
    <p>lorem ipsum etc, etc,</p>
  </div>
</div>