React Transition组件过渡动画未生效，请问原因是什么？

嘿，我看了你的代码，问题主要出在两个地方，都是和react-transition-group/Transition的状态值以及样式逻辑有关：

1. 错误的状态名称判断 #

react-transition-group的Transition组件会在不同阶段提供以下几个状态值：

• entering：组件正在进入（显示）的过程中
• entered：组件已经完全进入（显示完成）
• exiting：组件正在退出（隐藏）的过程中
• exited：组件已经完全退出（隐藏完成）

你代码里写的existed和existing都是不存在的状态值，所以你的opacity判断逻辑根本不会触发正确的样式变化，导致状态切换时样式直接跳变，看不到过渡效果。

2. 搞反的样式过渡逻辑 #

你当前的opacity判断是：当状态是错误的existed/existing时设为0，否则设为1。这和我们需要的过渡逻辑刚好相反——我们需要：

• 进入过程（entering/entered）时，opacity从0过渡到1
• 退出过程（exiting/exited）时，opacity从1过渡到0

修正后的代码 #

把上面的问题改过来，代码应该变成这样：

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(prevState => ({show: !prevState.show}))
  }

  render(){
    return(
      <div>
        <Transition in={this.state.show} timeout={2000}>
          {state => (
            <div style={{ 
              background: 'red', 
              height: '100px', 
              transition: 'all 2s ease',
              opacity: state === 'entering' || state === 'entered' ? 1 : 0
            }}>
              {state}
            </div>
          )}
        </Transition>
        <div className="showDiv" onClick={this.showDiv}>Show or Hide</div>
      </div>
    )
  }
}

export default TransitionComp;

另外，我还把你的setState逻辑简化了一下，用prevState来取之前的状态值，这样更可靠。

现在点击按钮，你应该就能看到红色div平滑地淡入淡出了——进入时从透明变不透明，退出时从不透明变透明，过渡时长和你设置的2s一致。

内容的提问来源于stack exchange，提问作者zac