react-spring - React Spring中的高度动画不起作用

Question

我一直在用 React Spring 制作动画比例。以下工作正常：

  <ul>
    {items.map((item, index) => {
      if (index === items.length - 1) {
        return (
          <Spring
            key={item.id}
            from={{
              progress: 0,
            }}
            to={{
              progress: 1,
            }}
            config={{ delay: 300, duration: 300 }}
          >
            {({ progress }) => {
              const style = { transform: `scale(${progress})` };
              return <Item style={style} {...item} />;
            }}
          </Spring>
        );
      }
      return <Item {...item} />;
    })}
  </ul>

但是，当我尝试对高度0进行动画处理时，auto它不起作用。使用 console.log 似乎style道具只是返回height: 'auto'而没有任何转换。

  <ul>
    {items.map((item, index) => {
      if (index === items.length - 1) {
        return (
          <Spring
            key={item.id}
            from={{
              height: 0
            }}
            to={{
              height: 'auto'
            }}
            config={{ delay: 300, duration: 300 }}
          >
            {(style) => {
              console.log(style)
              return <Item style={style} {...item} />;
            }}
          </Spring>
        );
      }
      return <Item {...item} />;
    })}
  </ul>      

标签： react-spring