Подтвердить что ты не робот

Переход общего элемента с использованием ReactJS

В Android переход на общий элемент позволяет двум тем же самым элементам, существующим на обеих страницах, связываться вместе при переходе на страницы, как и в обложке альбома, представленной ниже:

Интересно, можно ли достичь такого же перехода с ReactJS между классами. Если да, то какие-нибудь примеры? Если нет, то что с jQuery?

Ответ 1

Вы можете сделать этот переход почти полностью с помощью свойства CSS transform. React JS - все о манипуляции с DOM, но вам здесь не нужно много делать.

Анимация:

Скрывает текстовое содержимое небольшой панели.
Масштабирует изображение и текст, чтобы заполнить весь экран.
Вставляет новый текстовый контент.

Из этих 1 и 3 легко реагировать, поэтому вам действительно нужна только анимация перехода.

Вот очень простой пример, не использующий 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>

Ответ 2

Я не уверен, правильно ли я понял вопрос, потому что я не знаю рамки Android. Вот мое решение, основанное на знаниях ReactJS:

Шаги:

Поддерживать 2 переменные состояния: CurrentMode и NextMode. Возможные значения: 1 и 2.
При щелчке альбома измените значение NextMode на 2. А в коде сравните значения CurrentMode и NextMode. Если CurrentMode < NextMode, чем установить размер соответственно.
Аналогично, если CurrentMode > NextMode, чем установить размер соответственно.