Пример анимированного перехода React Router v4

react-motion не подходит для больших приложений. Вместо этого используйте react-transition-group.

Потому что react-motion используют javascript для выполнения перехода. При вызове API переход будет пересекаться (вызов синхронизации в js) и сделает переход медленным при переходе на новую страницу. Где в качестве react-transition-group используйте CSS для выполнения перехода.

документы v4 перемещены в react-transition-group, так что вы можете рассмотреть возможность выполнения такой же.

Что касается «исчезновения и появления одного и того же компонента», на самом деле это не один и тот же экземпляр компонента. Два экземпляра существуют одновременно и могут обеспечить плавное затухание. react-motion docs говорит, что "TransitionMotion держал c рядом", и я полагаю, что react-transition-group является такой же.

Вот обновленное решение с использованием реакции 16 и ReactCSSTransitionGroup из группы «реагировать-аддоны-css-transition-group».

index.js

import React, { Component } from "react";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import { render } from "react-dom";
import "./main.css";

function* continuosArrayIterator(arr) {
  let idx = 0;
  while (idx < arr.length) {
    let ret = arr[idx];
    idx++;
    if (idx === arr.length) {
      idx = 0;
    }
    yield ret;
  }
}

class App extends Component {
  constructor() {
    super();
    this.clickHandler = this.clickHandler.bind(this);
    this.items = [
      {
        id: 1,
        text: "item1",
        img: "https://mirrors.creativecommons.org/presskit/icons/cc.large.png"
      },
      {
        id: 2,
        text: "item2",
        img: "https://mirrors.creativecommons.org/presskit/icons/by.large.png"
      },
      {
        id: 3,
        text: "item3",
        img: "https://mirrors.creativecommons.org/presskit/icons/nc.large.png"
      },
      {
        id: 4,
        text: "item4",
        img:
          "https://mirrors.creativecommons.org/presskit/icons/nc-eu.large.png"
      }
    ];
    this.imageIterator = continuosArrayIterator(this.items);
    this.state = {
      image: this.imageIterator.next().value
    };
  }

  clickHandler(event) {
    return this.setState({
      image: this.imageIterator.next().value
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>Next Image</button>
        <ReactCSSTransitionGroup
          transitionAppear={true}
          transitionLeaveTimeout={500}
          transitionEnterTimeout={500}
          className="container"
          transitionName="example"
        >
          <div
            key={this.state.image.id}
            style={{
              position: "absolute",
              backgroundImage: `url(${this.state.image.img}`,
              backgroundSize: "auto 100px",
              height: "100px",
              width: "100px"
            }}
          />
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

main.css

.container {
  position: absolute;
}

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

Мне тоже не понравился пример RRv4 с анимацией. В итоге я написал свой собственный AnimatedSwitch для RRv4 Native.

Я полагаю, что не потребуется слишком много усилий, чтобы заменить родные анимации на реактивную пружину и запустить ее.

https://javascriptrambling.blogspot.com/2020/07/react-router-native-animatedswitch.html