全屏過渡動畫反應

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>