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

时间:2019-02-05 16:51:43

标签: 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>

但是,当我尝试从0auto设置高度动画时,它不起作用。使用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 个答案:

没有答案
相关问题