Анимация высоты в React Spring не работает

Я оживлял весы с 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>      

0 ответов

Другие вопросы по тегам