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

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

0 голосов
/ 05 февраля 2019

Я анимировал масштаб с помощью 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 prop просто возвращает 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>
...