全屏过渡动画中的反应

Question

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

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

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

如果我将容器div更改为0,0所以圆圈可以向上扩展，子div也会从原始位置移动。圆圈需要接管全屏但缩略图保持原位（直到我告诉它移动）。

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

Answer 1

圆圈动画

这是我尝试创建圆圈增长动画 简要探讨发生的事情：

1. 需要一个容器元素（相对定位）。
2. 点击元素（绝对位置）。
3. 在元素上添加click事件侦听器。
4. click事件创建一个兄弟元素（绝对定位）。
5. 将此元素定位在单击元素的中心。
6. 增加圆圈的大小。
＆＃13;
＆＃13;
/*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";
});
/*});*/
＆＃13;
.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%);
}
＆＃13;
<div class="container">
  <div class="spesial">
    <h1>Cool header</h1>
    <p>lorem ipsum etc, etc,</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;