时间戳

首页 > 解决方案 > Svg 路径在 React Spring 动画库中没有动画

reactjs - Svg 路径在 React Spring 动画库中没有动画

问题描述

我试图实现与svg 路径动画的react-spring文档中所示相同的示例，但它会立即呈现：这是我的代码：

<Spring from={{ x: 0 }} to={{ x: 100 }}>
  {props => (
    <svg strokeDashoffset={props.x}>
      <path d="M7 2v11h3v9l7-12h-4l4-8z" />
    </svg>
  )}
</Spring>

这是我的代码框： https ://codesandbox.io/s/9llxp0zx8o

Svg 路径没有像这里的示例 2 那样按预期设置动画：http ://react-spring.surge.sh/spring

我想我在这里遗漏了一些东西。如果有人能找到问题并引导我，我会很高兴。

标签： reactjssvgreact-spring

解决方案

要像示例中那样对其进行动画处理，您还需要将 strokeDasharray 值设置为 SVG 路径的长度。这是一个参考示例：https ://www.w3schools.com/howto/howto_js_scrolldrawing.asp

推荐阅读