javascript - React 过渡组 (v1) 在重新渲染时不激活过渡

Question

我有一个简短的测验应用程序，我正在尝试为其应用一些动画。我的想法是一次只显示一个问题，每个问题之间都有转换。我使用 create-react-app 作为样板，并且我正在使用 react-transitions-group v1 来应用所述转换。现在我的根组件看起来像这样:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Panel from './components/Panel';
import Results from './components/Results';
import Intro from './components/Intro';
import Form from './components/Form';

class App extends Component {

  constructor (props) {
    super (props);
    this.state = {
      collaborator: 0,
      pilot: 0,
      producer: 0,
      harmonizer: 0,
      counter: 0,
      questions: [
       'Where do you put the most effort on a day-to-day basis?',
       'What are your biggest blind spots?',
       'In what settings do you thrive?',
       'In what settings do you struggle?'
      ],
      answers: [
        [
          {answer: 'Team building', archetype: 'collaborator'},
          {answer: 'Directing strategy', archetype: 'pilot'},
          {answer: 'Driving task completion', archetype: 'producer'},
          {answer: 'Keeping processes and relationships running smoothly', archetype: 'harmonizer'}
        ],
        [
          {answer: 'Setting a clear direction and creating a personal brand', archetype: 'collaborator'},
          {answer: 'Making space for others and planning for the longterm', archetype: 'pilot'},
          {answer: 'Connecting with team members and innovating', archetype: 'producer'},
          {answer: 'Accepting ambiguity and addressing conflict', archetype: 'harmonizer'}
        ],
        [
          {answer: 'Settings where team members are seeking coaching and development', archetype: 'collaborator'},
          {answer: 'Ambiguous and high growth environments', archetype: 'pilot'},
          {answer: 'Organizations with clear structures and processes', archetype: 'producer'},
          {answer: 'Volatile settings that need to be tamed', archetype: 'harmonizer'}
        ],
        [
          {answer: 'Settings where unilateral decision making is required', archetype: 'collaborator'},
          {answer: 'Conservative environments that discourage innovation', archetype: 'pilot'},
          {answer: 'Teams where each member desires independence', archetype: 'producer'},
          {answer: 'Anywhere tough feedback needs to be given', archetype: 'harmonizer'}
        ]
      ]
    }
    this.onSelect = this.onSelect.bind(this);
    this.onSelectIntro = this.onSelectIntro.bind(this);
  }

  onSelect(value) {
    this.setState(prevState => {
      return {
        [value]: prevState[value] + 1,
        counter: prevState.counter + 1
      }
    })
  }

  onSelectIntro() {
    this.setState(prevState => {
      return { counter: prevState.counter + 1 };
    })
  }

  render() {
    switch (this.state.counter) {
      case 0:
        return <Intro onClick={this.onSelectIntro}/>;
        break;
      case 1: case 2: case 3: case 4:
         return <Panel 
          question={this.state.questions[this.state.counter - 1]}
          answers={this.state.answers[this.state.counter - 1]}
          onSelect={this.onSelect}
        />;
        break;
      case 5:
        return <Results />;
        break;
    }
  }
}

export default App;

我的 Panel 组件是这样的:

import React from 'react';
import Form from './Form';
import PropTypes from 'prop-types';

function PanelOne (props) {
    return (
        <div>
            <Form question={props.question} answers={props.answers} onSelect={props.onSelect}/>
        </div>
    )
}

PanelOne.propTypes = {
  answers: PropTypes.array.isRequired,
  onSelect: PropTypes.func.isRequired
};

export default PanelOne;

Form 是我应用转换的地方，它看起来像这样:

import React from 'react';
import PropTypes from 'prop-types';
import { RadioGroup, RadioButton } from 'react-radio-buttons';
import { CSSTransitionGroup } from 'react-transition-group';

function Form (props) {
    return (
        <div>
            <CSSTransitionGroup 
                transitionName='slide'
                transitionEnterTimeout={300}
                transitionLeaveTimeout={300}
            >
                <h3>{props.question}</h3>
                <RadioGroup onChange={props.onSelect}>
                    {
                        props.answers.map(answer => 
                            <RadioButton key={answer.answer} value={answer.archetype}>
                                {answer.answer}
                            </RadioButton>
                        )
                    }
                </RadioGroup>
            </CSSTransitionGroup>
        </div>
    )
}

Form.propTypes = {
  answers: PropTypes.array.isRequired,
  onSelect: PropTypes.func.isRequired
};

export default Form;

最后，这是我的 index.css 文件:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.slide-enter {
  opacity: 0.01;
}
.slide-enter.slide-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.slide-leave {
  opacity: 1;
}
.slide-leave.slide-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

我希望当我点击一个问题的答案时，下一个问题将在应用转换后显示。但是，当我单击一个答案时，实际发生的是立即显示下一个问题，两个问题之间没有过渡。我真的不知道我在这里做错了什么......

Answer 1

您的 Form 和 Panel 组件是功能组件，因此它们没有实例。

React Components, Elements, and Instances

Only components declared as classes have instances, and you never create them directly: React does that for you.

因此，当它们的 props 发生变化时，底层的 DOM 树可能会被移除。这样就不会发生离开动画。

Reconciliation

When a component updates, the instance stays the same, so that state is maintained across renders.

您应该尝试使用类组件。