13

v4 文档中提供的动画过渡示例对我来说似乎有点令人费解，因为它描述了相同组件的淡入和淡出以及调整背景颜色。

我正在尝试将此技术应用于一个更真实的示例，将一个组件淡出另一个组件，但是我无法让它正常工作（它似乎只是将第一个淡出，然后第二个弹出in，并且此转换仅以一种方式起作用（后退按钮不会导致转换）。

这是我的代码，它使用了示例中的精简版本MatchWithFade：

import React from 'react';
import { TransitionMotion, spring } from 'react-motion'
import { HashRouter, Match, Miss } from 'react-router';
import Home from './components/Home';
import Player from './components/Player';
import FormConfirmation from './components/FormConfirmation';

const App = () => (
  <HashRouter>
    <div className="App">
      <MatchWithFade exactly pattern="/" component={Home} />

      <MatchWithFade pattern="/player/:playerId" component={Player} />

      <MatchWithFade pattern="/entered" component={FormConfirmation} />

      <Miss render={(props) => (
        <Home players={Players} prizes={Prizes} {...props} />
      )} />
    </div>
  </HashRouter>
);

const MatchWithFade = ({ component:Component, ...rest }) => {
  const willLeave = () => ({ zIndex: 1, opacity: spring(0) })

  return (
    <Match {...rest} children={({ matched, ...props }) => (
      <TransitionMotion
        willLeave={willLeave}
        styles={matched ? [ {
          key: props.location.pathname,
          style: { opacity: spring(1) },
          data: props
        } ] : []}
      >
        {interpolatedStyles => (
          <div>
            {interpolatedStyles.map(config => (
              <div
                key={config.key}
                style={{...config.style}}
              >
                <Component {...config.data}/>
              </div>
            ))}
          </div>
        )}
      </TransitionMotion>
    )}/>
  )
}

export default App;

我意识到这个问题几乎是这个问题的重复，但是这个问题有一个公认的答案，但实际上并没有回答这个问题。

4

4 回答 4

1

react-motion不适合大型应用程序。改为使用react-transition-group。

因为react-motion用于javascript执行过渡。拨打API电话时，转换将跨越路径（同步调用js）并在路由到新页面时使转换滞后。用于执行转换的位置react-transition-group。CSS

于 2018-09-12T09:08:13.650 回答
0

这是使用来自“react-addons-css-transition-group”的 react 16 和 ReactCSSTransitionGroup 的更新解决方案

编辑 zw0xv4vy3x

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;
}
于 2018-04-12T21:07:12.213 回答
0

v4 文档已移至，因此react-transition-group您可以考虑这样做。

关于“淡入淡出同一个组件”，它实际上并不是同一个组件实例。两个实例同时存在并且可以提供交叉淡入淡出。 react-motion文档说“TransitionMotion一直c存在”，我想react-transition-group是一样的。

于 2017-12-25T23:47:03.893 回答
0

我也不喜欢动画的 RRv4 示例。我最终为 RRv4 Native 编写了自己的“AnimatedSwitch”。

我想将本机动画换成 react-spring 并启动并运行并不需要太多工作。

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

于 2020-08-20T22:57:35.767 回答