Javascript 使用ReactJS的共享元素转换

在Android中，共享元素转换允许两个页面中存在的两个完全相同的元素在转换页面时链接在一起，就像下面显示的gif中的相册艺术一样：

---

我想知道是否有可能在类之间使用ReactJS实现同样的转换。如果有，有什么例子吗？如果没有，那么jQuery呢？

我不确定我是否正确理解了这个问题，因为我不知道Android框架。以下是我基于ReactJS知识的解决方案：

步骤：

维护两个状态变量：

CurrentMode

&

NextMode

。可能的值为

1

和

2

单击相册，将

NextMode

更改为

2

。在代码中比较

CurrentMode

和

NextMode

的值。如果

CurrentMode

NextMode

，则相应地设置大小

同样，当

CurrentMode

NextMode

时，也可以相应地设置大小

---

您几乎可以完全使用CSS

transform

属性完成此转换。React JS完全是关于操作DOM的，但在这里不需要做太多

动画：

隐藏小面板的文本内容

缩放图片和文本背景以填充整个屏幕

放入新的文本内容

其中的1和3很容易使用React，因此您只需要过渡动画

下面是一个非常基本的例子，完全不使用JS：

正文{
背景色：#ccc；
}
.卡片{
宽度：150px；
填充：0；
保证金：0；
背景色：#fff；
位置：绝对位置；
顶部：0:左侧：0；
z指数：1；
/*过渡特性意味着对其所做的更改将设置动画*/
过渡性质：变换；
过渡定时功能：易进易出；
过渡时间：500ms；
变换原点：左上角；
}
.card>img{
宽度：150px；
高度：150像素；
保证金：0；
填充：0；
}
.card>.content{
宽度：150px；
高度：50px；
背景色：#fff；
保证金：0；
}
/*这仅用于本演示的目的。
*在生产中，您将有一个基本的网格布局和JS来确定位置*/
.卡片：第n种类型（2）{
左：175px；
}
.卡片：第n种类型（3）{
顶部：230像素；
}
.卡片：第n种类型（4）{
顶部：230像素；
左：175px；
}
/*悬停时，将卡片转换为全尺寸，并将其转换到左上角
*请注意，translate位于scale之前*/
.卡：第n个类型（1）：悬停{
转变：规模（2.1667）；
z指数：2；
}
.卡：第n个类型（2）：悬停{
变换：平移（-175px，0）比例（2.1667）；
z指数：2；
}
.卡：第n个类型（3）：悬停{
转换：转换（0，-230px）比例（2.1667）；
z指数：2；
}
.卡：第n个类型（4）：悬停{
转换：转换（-175px，-230px）刻度（2.1667）；
z指数：2；
}

---

您可以使用mauerwerk执行此操作：

---

它基本上是一个网格，其中每个单元格都会获得一个状态，无论是处于缩略图模式还是打开模式。您可以使用此状态在内容之间切换或转换，是要淡入淡出还是让零件竖立由您决定。还有一个额外的切换功能，您可以使用它来切换单元格的打开/关闭。

您显示的事务应该可以通过html5/css3中的一个元素转换（图像+音乐播放器）实现，而reactjs可以管理音乐播放器子元素的内容更改。这样你就不需要在react中找到共享元素转换选项来直接回答你的问题，你检查过了吗？@ChrisChen已经检查过了，我想我要做我自己的共享元素转换系统。同时，如果有人发现一个库已经实现了这一点，请链接到这里。@ChrisChen你有任何实际的代码示例吗？看看这里的示例，这很酷！但是它不适合我的需要。在react列表中，项目和关注的项目是两个独立的组件，因此我不能像您的示例中所示那样轻松创建它。@Lucio您可以，您只需要在动画播放后多做一步，就可以在项目组件中进行交换。或者让项目组件同时处理展开的详细信息和列表视图，然后进行转换。在任何一种情况下，这都是您在web中进行这种转换的方式。