2015-12-21 67 views
3

尋找對如何處理這個動畫一些幫助: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也會從原始位置移開。該圈子需要接管全屏,但縮略圖圖像保持原位(直到我告訴它移動)。

我不是要求任何人提供文字代碼的例子,但只是要求在概念上討論如何解決問題。

回答

2

圈動畫

這是我試圖創建的圈子越來越多的動畫。
的什麼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>

+0

這工作,相當不錯。但是當這個容器需要降低屏幕時會發生什麼?假設上面有一個導航條和標題圖像,那麼容器div在那之後開始。從「overflow:hidden」這個圓圈的高度不會被限制在容器的頂部嗎? – tehfailsafe

+0

只要容器很大,您就可以隨時在身體中的圓圈。 (容器可以是身體) – Persijn