使用ReactJS進行共享元素轉換

Question

在Android中，共享元素轉換允許兩個頁面中存在的兩個完全相同的元素在轉換頁面時鏈接在一起，就像下面顯示的gif中的專輯封面一樣：

我想知道是否有可能在類之間使用ReactJS實現相同類型的轉換。 如果是這樣，任何例子？ 如果沒有，用jQuery怎么樣？

Answer 1

您幾乎可以使用CSS transform屬性完成此轉換。 React JS就是在操縱DOM，但你不需要在這里做太多。

動畫：

1. 隱藏小面板的文本內容。
2. 縮放圖片和文本背景以填滿整個屏幕。
3. 放入新的文本內容。

其中1和3很容易使用React，所以你只需要過渡動畫。

這是一個非常基本的例子，根本不使用JS：

 body { background-color: #ccc; } .card { width: 150px; padding: 0; margin: 0; background-color: #fff; position: absolute; top: 0: left: 0; z-index: 1; /* Transition properties mean changes to them are animated */ transition-property: transform; transition-timing-function: ease-in-out; transition-duration: 500ms; transform-origin: top left; } .card>img { width: 150px; height: 150px; margin: 0; padding: 0; } .card>.content { width: 150px; height: 50px; background-color: #fff; margin: 0; } /* This is only for the purposes of this demo. * In production you'd have an underlying grid layout and JS to figure out the position */ .card:nth-of-type(2) { left: 175px; } .card:nth-of-type(3) { top: 230px; } .card:nth-of-type(4) { top: 230px; left: 175px; } /* On hover transform the card to full size and translate it to the top left * Note that translate comes before scale. */ .card:nth-of-type(1):hover { transform: scale(2.1667); z-index: 2; } .card:nth-of-type(2):hover { transform: translate(-175px, 0) scale(2.1667); z-index: 2; } .card:nth-of-type(3):hover { transform: translate(0, -230px) scale(2.1667); z-index: 2; } .card:nth-of-type(4):hover { transform: translate(-175px, -230px) scale(2.1667); z-index: 2; } 

 <div class="card"> <img src="http://via.placeholder.com/325/F50057/ffffff"> <div class="content"></div> </div> <div class="card"> <img src="http://via.placeholder.com/325/F44336/ffffff"> <div class="content"></div> </div> <div class="card"> <img src="http://via.placeholder.com/325/1DE9B6/000000"> <div class="content"></div> </div> <div class="card"> <img src="http://via.placeholder.com/325/FFEB3B/000000"> <div class="content"></div> </div> 

基本技巧是使用帶有translate和scale CSS transform - 這些屬性可以由圖形卡處理，因此即使在移動設備上也能保持動畫流暢。

請注意，CSS相當笨重 - 我這樣做就是為了表明它可以用純CSS完成。 在實踐中，您將需要一些JS來設置偏移屬性，掛鈎點擊事件等。

另一個竅門（我還沒有在這里做）是向后縮放動畫-按實際尺寸控制啟動和translate / scale 。下入它似乎開始在位置它當用戶點擊它刪除transform -即保存瀏覽器不必在開始動畫之前重新計算完整大小的對象的DOM。

Answer 2

我不確定我是否正確理解了這個問題，因為我不知道Android框架。 以下是基於ReactJS知識的解決方案：

腳步：

1. 維護2個狀態變量： CurrentMode和NextMode 。 可能的值為1和2 。
2. 點擊相冊后，將NextMode更改為2 。 並在代碼中比較CurrentMode和NextMode的值。 如果CurrentMode < NextMode ，則相應地設置大小。
3. 同樣，當CurrentMode > NextMode時， NextMode地設置大小。

Answer 3

您可以使用mauerwerk執行此操作： https ： //github.com/drcmda/mauerwerk

它基本上是一個網格，每個單元格都處於縮略圖或打開模式狀態。 您可以使用此狀態在內容之間切換或轉換，無論您是要淡化它們還是讓部件支撐都取決於您。 還有一個額外的切換功能，可用於切換單元格打開/關閉。