共享元素的過渡使用ReactJS

在Android中，共享元素的過渡允許在兩個頁面現有鏈接在一起過渡頁面時，就像下面所示的gif專輯封面2個完全相同的元素：共享元素的過渡使用ReactJS

我想知道是否有可能通過類之間的ReactJS實現同樣的轉換。如果是這樣，任何例子？如果不是，那麼jQuery怎麼樣？

來源

2017-06-01 thousight

你表現應該是可以實現使用HTML5/CSS3一個過渡族（圖片+音樂播放器），而reactjs可以管理音樂播放器子元素的含量變化的交易。所以，你不需要找一個共享元素TRANSATION替代的反應 –

直接回答你的問題，你檢查https://facebook.github.io/react/docs/animation.html#high-level-api- reactcsstransitiongroup？ –

@ChrisChen已經簽了，我想我會做我自己的共享元素轉換系統。與此同時，如果有人發現了一個已經這樣做的圖書館，請在此鏈接。 – Lucio

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

動畫：

隱藏小面板的文本內容。
縮放圖片和文字背景以填滿整個屏幕。
添加新的文字內容。

這些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>

的基本技巧是使用CSS transform與translate和scale - 這些特性可以被處理顯卡等，即使在手機上也能保持動畫的流暢。

請注意，CSS是相當笨拙 - 我已經這樣做，只是爲了表明它可以用純CSS完成。在實踐中，你會想要一些JS設置偏移屬性，掛鉤點擊事件等。

另一個技巧（我沒有在這裏完成）是向後縮放動畫 - 從滿大小控制和translate/scale它下降到它似乎開始的位置。當它在用戶點擊刪除transform - 從開始有動畫之前重新計算全尺寸對象的DOM保存瀏覽器。

來源

2017-08-14 07:02:31 Keith

這很酷！但它不符合我的需求。在反應時，列表中的項目和重點關注的項目是兩個單獨的組件，所以我無法輕鬆實現，就像您的示例中所示。 – Lucio

@Lucio你可以，你只需要一個額外的步驟播放動畫，在項目組件交換後。或者讓項目組件處理展開的細節和列表視圖，然後執行轉換。無論哪種情況，這都是您在網絡中進行這種轉變的方式。 – Keith

我不確定是否正確理解問題，因爲我不瞭解Android框架。這是基於ReactJS認識我的解決方案：

步驟：

維持2的狀態變量：CurrentMode & NextMode。可能的值是1 & 2。
在點擊專輯更改NextMode爲2。並在代碼中比較CurrentMode & NextMode的值。如果CurrentMode < NextMode相應地設置大小。
同樣當CurrentMode>NextMode相應地設定大小。

來源

2017-08-13 18:45:38 iMatoria

共享元素的過渡使用ReactJS

回答

相關問題