共有要素転移使用ReactJSアンドロイドで

Question

は、共有要素の遷移だけを以下に示すGIFでアルバムアートのように、ページを移行するときに一緒にリンクするために、両方のページに存在する2つのまったく同じ要素を可能にしますクラス間でReactJSを使って同じ種類の移行を達成することが可能かどうか疑問です。もしそうなら、どんな例？そうでない場合、jQueryはどうですか？

Answer 1

ほとんどの場合、この変更はCSS transformプロパティで行うことができます。 React JSはすべてDOMの操作に関するものですが、ここでそれを行う必要はありません。

アニメーション：

1. は小さなパネルのテキストコンテンツを非表示にします。
2. 画像とテキストの背景を拡大縮小してフルスクリーンにします。
3. 新しいテキストコンテンツを挿入します。

これらのうち、1と3はReactで簡単ですので、本当にトランジションアニメーションが必要です。 - これらのプロパティはで扱うことができ

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を使用することです。ここでは

はまったくJSを使用していない非常に非常に基本的な例です。グラフィックスカードとモバイルでも滑らかなアニメーションを維持します。

CSSはちょっと大変ですが、純粋なCSSで行うことができることを示しています。実際には、いくつかのJSがオフセットプロパティを設定し、クリックイベントをフックアップするようにしたいと考えています。

もう1つのトリック（私はここでは行っていません）は、サイズコントロールとtranslate/scaleそれが開始するように見える位置にダウンします。ユーザーがクリックすると、transformが削除されます。これにより、アニメーションを開始する前にブラウザがフルサイズのオブジェクトのDOMを再計算する必要がなくなります。

Answer 2

私はAndroidフレームワークを認識していないため、質問を正しく理解するかどうか分かりません。ここでReactJSの知識に基づいて私の解決策は次のとおりです。

ステップ：CurrentMode & NextMode：

1. 2の状態変数を維持します。可能な値は1 & 2です。
2. アルバムをクリックするとNextModeが2に変更されます。コードでは、CurrentMode & NextModeの値を比較します。 CurrentMode < NextModeよりサイズを適切に設定してください。
3. 同様に、CurrentMode>NextModeよりサイズを設定してください。