reactjs - 反应过渡组删除/插入简单功能反应组件的动画

Question

我希望在 preact 中创建一个用于动画目的的反应过渡组（但这个问题也适用于反应。）我有一个我写的 Square 功能组件和一个渲染四个 Square 的页面和一系列按钮将删除/插入/删除+插入。我看过一些关于反应过渡组的博客文章，并试图应用它们，但遇到了一些障碍。

这是我的基本 Square 组件

function Square (props) {
  const { color, x, y, width, height, style, status, ...passThrough } = props;

  return (
    <g style={style}>
    <rect
      fill={color} 
      x={x}
      y={y}
      width={width}
      height={height}></rect>
    </g>
  )
}

这是基本动画发生的地方

    <Transition in={transitionProp} timeout={500}>
      {state => (
        <div> {state} </div>
      )}
      <svg width="600" height="600">
        {renderSquareData(squareData2, style[state])}
      </svg>
    </Transition>

然而，该状态当前没有显示任何内容，在 div 中没有呈现任何内容。我想知道在这种情况下如何将 TransitionGroup 用于功能组件。我想根据过渡状态理想地应用 defaultStyle、transitionStyle。

  const style = {
  entering: {
    transition: `opacity 300ms ease-in-out`,
    opacity: 1
  },
  entered: {
    transition: `opacity 300ms ease-out`,
    opacity: 0
  }}

标签： reactjsreact-transition-group