React中的全屏过渡动画

Question

React中的全屏过渡动画

4

寻求关于如何处理这个动画的帮助：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处，但是网格中的项目需要其自己的正确位置。目前，我正在使用isotope在react组件中布局网格。

如果我将容器div更改为0,0，以便圆形可以缩放，子div也会从其原始位置移动。圆形需要占据整个屏幕，但缩略图图像需要保持原位（直到我告诉它移动为止）。

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

- tehfailsafe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Persijn · Accepted Answer

圆形动画

这是我尝试创建的圆形扩张动画。
简单解释一下发生了什么：

需要一个容器元素（相对定位）。
点击元素（绝对定位）。
在该元素上添加点击事件监听器。
点击事件会创建一个同级元素（绝对定位）。
将此元素定位为点击元素的中心。
增加圆的大小。

/*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>