使用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>

基本技巧是将CSS transform与translate和scale一起使用 - 这些属性可由图形卡处理，因此即使在移动设备上也能保持动画流畅。

请注意，CSS非常笨重 - 我这样做就是为了表明它可以用纯CSS完成。在实践中，您将需要一些JS来设置偏移属性，挂钩点击事件等等。

另一个技巧（我在这里没有做过）是向后缩放动画 - 从完整大小控件开始，然后translate / scale向下到它看起来开始的位置。当用户点击它时，删除transform - 这使得浏览器不必在开始动画之前重新计算完整大小的对象的DOM。

Answer 2

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

步骤：

1. 维护2个状态变量：CurrentMode＆amp; NextMode。可能的值为1＆amp; 2。
2. 点击相册后，将NextMode更改为2。在代码中比较CurrentMode＆amp;的值。 NextMode。如果CurrentMode＆lt; NextMode比相应地设置尺寸。
3. 同样在CurrentMode＆gt; NextMode比相应地设置尺寸。

Answer 3

您可以使用mauerwerk：https://github.com/drcmda/mauerwerk

基本上是一个网格，每个单元格都处于缩略图或打开状态。您可以使用此状态在内容之间切换或过渡，是要淡化它们还是让零件站立取决于您。还有一个附加的切换功能，可用于切换打开/关闭的单元格。