为什么我退出的动画无法触发和react-transition-group？

Question

演示：https://stackblitz.com/edit/react-jymar3，您可以在控制台中跟踪动画的状态。

我会理解为什么它会失败，因为我已经确保使用react-transition-group提供的状态。

以下是页面组件的示例：

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

const duration = 300;

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

const transitionStyles={
  entering:{opacity:0},
  entered:{opacity:1},
  exiting:{opaciy:0.5, background:"green"},
  exited:{opacity:0.1,}
};

const Component=({in:inProp}) =>{
  console.log("inProp: ", inProp);
  return(
    <Transition 
      appear={true}
      exit={true}
      in={true}
      timeout={duration} 
      addEndListener={(node, done) => {
        alert("transitionend")
        // use the css transitionend event to mark the finish of a transition
        node.addEventListener('transitionend', done, false);
      }}
    >
      {state =>{
        console.log("state: ", state)
        return (
          <div style={{
            ...defaultStyle,
            ...transitionStyles[state]
          }}>
            Welcome in about
          </div>
      )}}
    </Transition>
  )
}

export default Component