CSS SVGator动画和多个类

Question

display:block.的前提：有8个选项卡(带有JS)通过显示来切换相关的内容包装:none->这些内容包装器中有动画SVG，它们会引发问题。本质上，如果选项卡是活动的，则相关的内容包装应该显示，SVG动画应该播放。一旦激活了另一个选项卡，前面的内容包装器和SVG动画应该重新设置。

我在SVGator中创建了一些动画，但由于以下几个原因未能使它们正常工作：

1. 有8个选项卡，每个选项卡只包含8个SVGs中的一个，这意味着只有活动选项卡才会有动画。显然不是这样，他们都会动起来，即使是看不见的。
2. 所以我认为使用‘滚动到视图’可以修复它，再加上切换选项卡。但是，由于选项卡将SVG各自的包装从display:none转到display:block，动画根本无法播放。(我试着研究关键帧和diplay:那个matter...)
3. So的块属性-我想我将转向CSS 只使用动画，将所有关键帧编译成一个.css文件，然后切换类来激活相应的关键帧。

)

目前，我认为使用第三种方法是这里唯一可行的解决办法。然而，我的JS并不强大，似乎在某个地方让我失望了。(有人能帮我修好吗？)奖金查询:还有什么其他建议可以把这些东西组合起来才能起作用吗？

<div class="taps">
     <button class="taplinks" onclick="openTap(event, 'One', SVG-1)" id="defaultOpen">Button 1</button>
     <button class="taplinks" onclick="openTap(event, 'Two', SVG-2)">Button 2</button>
     <button class="taplinks" onclick="openTap(event, 'Three', SVG-3)">Button 3</button>
   </div> 

   <div id="One" class="tapcontent">
      <svg id="SVG-1" . . .rest of the generated code (without CSS keyframes). . . </svg>
   </div> 
   <div id="Two" class="tapcontent">
      <svg id="SVG-2" . . .rest of the generated code (without CSS keyframes). . . </svg>
   </div> 
   <div id="Three" class="tapcontent">
      <svg id="SVG-3" . . .rest of the generated code (without CSS keyframes). . . </svg>
   </div> 


JavaScript: 

function openTap(evt, TapName, svgName) {
  var i, tapcontent, taplinks;
  tapcontent = document.getElementsByClassName("tapcontent");
  for (i = 0; i < tapcontent.length; i++) {
    tapcontent[i].style.display = "none";
  }
  taplinks = document.getElementsByClassName("taplinks");
  for (i = 0; i < taplinks.length; i++) {
    taplinks[i].className = taplinks[i].className.replace(" active", "");
  }
  document.getElementById(TapName).style.display = "block";
  evt.currentTarget.className += " active";
  var element = document.getElementById(TapName);
  element.classList.add("reveal");
}
document.getElementById(svgName).style.display = "block";
  evt.currentTarget.className += " active";
  var element = document.getElementById(svgName);
  element.classList.add("animate");
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

我在没有SVG的情况下成功地使用了这个JS (以前只是图像)，所以切换选项卡是有效的，但是由于某些原因，向SVG element.classList.add(animate);添加相同的逻辑似乎不起作用。注:我重命名了一些参数，因为我倾向于使用奇怪的外部逻辑和命名xD

Answer 1

现在有一种以编程方式控制动画的方法。使用“动画启动:编程”导出SVG，并在需要时启动动画。

如果您想使用JS，您可以轻松地将元素从DOM树中分离出来，并在内容包装器变得可见时附加它。它重置CSS动画。