Question

我正试着绕过React Transition Group V2

我使用create-react-app和文档中的示例构建了一个演示，但它跳过了进入/退出状态'并且没有触发转换。

到目前为止，我有......。

尝试内联（如在文档中）并使用类名，但结果相同。添加和删除浏览器特定的CSS 摆弄所有道具，运气不佳（尽管出现的道具确实触发'进入'并进行过渡）

以下是文档的链接：https://reactcommunity.org/react-transition-group/

这就是我所拥有的。（我知道V2非常新，所以任何帮助都会非常感激。）

import React, { Component } from 'react';
import Transition from 'react-transition-group/Transition'

class App extends Component {

  state = { show: false }

  handleClick = e => {
    this.setState({show: !this.state.show})
  }
  render() {

    const duration = 300;

    const defaultStyle = {
      transition: `opacity ${duration}ms ease-in-out`,
      opacity: 0,
    }

    const transitionStyles = {
      entering: { opacity: 1 },
      entered:  { opacity: 1 },
    };

    const Fade = ({ in: inProp }) => (
      <Transition in={inProp} timeout={duration}>
        {(state) => (
          <div style={{
            ...defaultStyle,
            ...transitionStyles[state]
          }}>
            I'm A fade Transition!
          </div>
        )}
      </Transition>
    );

    return (
      <div className="App">
          <Fade in={this.state.show}/>
          <button onClick={this.handleClick}>TOGGLE</button>
      </div>
    );
  }
}

export default App;

Answer 1

好的，道歉，我犯了一个简单的错误。

演示文稿Fade组件向我投掷，我错误地将其嵌套在App组件中。

我将它及其关联的consts移到了App组件之外，瞧！

import React, { Component } from 'react';
import Transition from 'react-transition-group/Transition'

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm A fade Transition!
      </div>
    )}
  </Transition>
);

class App extends Component {

  state = { show: false }

  handleClick = e => {
    this.setState({show: !this.state.show})
  }
  render() {
    return (
      <div className="App">
          <Fade in={this.state.show}/>
          <button onClick={this.handleClick}>TOGGLE</button>
      </div>
    );
  }
}

export default App;

React Transition Group V2跳过进入/退出状态

1 个答案: