全屏过渡动画反应

Question

寻找对如何处理这个动画一些帮助：https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFZ3BiM1dnR0ZPU1k/animation_meanigfultrans_visualcont.webm

初步尝试与反应路由器并不顺利，最终决定我不需要专用路线为每个打开的组件。现在我遇到了定位问题...

圆圈填满整个屏幕，所以它需要在100％x 100％的div和0,0，但网格中的项目需要他们自己的正确位置。目前，我在反应组件中使用同位素来布置网格。

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

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

Answer 1

圈动画

这是我试图创建的圈子越来越多的动画。
的什么happends短explination：

1. 需要一个容器元件（相对定位）。
2. 点击元素（绝对位置）。
3. 在元素上添加单击事件侦听器。
4. 单击事件创建一个同级元素（绝对定位）。
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>