样式化组件中的 SVG 动画答案

【问题标题】：SVG animation in styled components样式化组件中的 SVG 动画
【发布时间】：2021-09-02 10:03:51
【问题描述】：

我有不同的svgs

<svg class="logo">
 <path .../>
 <path .../>
 ...
</svg>

我想为各个路径设置动画。在香草 JS 中，我会做类似的事情

const logo = document.querySelectorAll('.logo path');

for (let i = 0; i < logo.length; i++) {
  console.log(`${i}: ${logo[i].getTotalLength()}`);
}

手动查找各个路径的长度，然后像这样逐个路径在css路径中制作动画

...
.logo path:nth-child(2) {
  stroke-dasharray: ...;
  stroke-dashoffset: ...;
  animation: anim 2s ease-in-out forwards;
}
.logo path:nth-child(3) {
  stroke-dasharray: ...;
  stroke-dashoffset: ...;
  animation: anim 2s ease-in-out forwards 0.2s;
}
...
@keyframes anim {
  to {
    stroke-dashoffset: 0;
  }
}

我在我的React项目中使用了styled components，我想让上面的逻辑符合整个项目的风格，也就是使用styled components。实现这一目标的最有效方法是什么？

【问题讨论】：

标签： javascript css reactjs svg styled-components

【解决方案1】：

您可以考虑使用网络动画 api (https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)。所以动画可以通过 JS 设置，所以你可以使用你提供的 JS 代码来计算长度并将它们存储在变量中。然后，您可以在网络动画 api 中使用这些变量，这样您就不必手动计算和输入。

【讨论】：