2

I've been animating scale with React Spring. The following works fine:

  <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>

However when I try and animate height from 0 to auto it doesn't work. Using console.log it seems that the style prop just returns height: 'auto' without any transitions.

  <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>      
Evanss
  • 23,390
  • 94
  • 282
  • 505

0 Answers0