为什么我的过渡不起作用？

Question

我有这个具有过渡效果的组件

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

class TransitionComp extends Component{

    state = {
      show: true
    }

    showDiv = () => {
        this.setState({show: !this.state.show ? true : false})
    }

    render(){
        return(
            <div>
                <Transition in={this.state.show} timeout={2000}>
                    {state =>
                        <div style={{
                            background: 'red',
                            height: '100px',
                            transition: 'all 2s ease',
                            opacity: state === 'existed' || state === 'existing' ? 0 : 1
                        }}>{state}</div>

                    }
                </Transition>

                <div className="showDiv" onClick={this.showDiv}>Show or Hide</div>

            </div>



        )
    }
}


export default TransitionComp;

当我按下show or hide时，我看不到简单的动画只是状态改变所以为什么会这样？

Answer 1

您的代码是正确的，存在一些类型错误，而不是existed应该是exited而existing应该是exiting。

   <Transition in={this.state.show} timeout={2000}>
      {state =>
        <div style={{
          background: 'red',
          height: '100px',
          transition: 'all 2s ease',
          opacity: state === 'exited' || state === 'exiting' ? 0 : 1
        }}>{state}</div>

      }
    </Transition>