javascript - 使用 ReactJS 的共享元素转换

Question

在 Android 中，共享元素转换允许两个页面中存在的 2 个完全相同的元素在转换页面时链接在一起，就像下面 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。