SVG div 在点击时旋转但在第二次点击时不旋转回来

Question

所以我昨晚才发现 svg CSS 动画甚至是可能的所以请原谅我犯的任何愚蠢的错误。我正在尝试制作一个 SVG 菜单图标（3 条），单击该图标时，顶线和底线将旋转形成一个 X，中间线将淡出。

从我看过的教程来看，CSS 动画似乎是在 SVG 文件本身中编写的。这是我目前所拥有的 -

<svg id="menuicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" >
<g fill="none" stroke="#000" stroke-width="6">

<style>
#menuicon.menuopen .topline{
-moz-transform: rotate(45deg);
         -webkit-transform:rotate(45deg); 
         -ms-transform:rotate(45deg);
         -o-transform:rotate(45deg);
  transform-origin: 20 20;
  transition:0.8s;
}

#menuicon{
cursor:pointer;
}


</style>

<script type="text/javascript">
var clicker = document.querySelector('#menuicon');
clicker.addEventListener('click', function() {
this.classList.toggle('menuopen');

});
</script>

<path class="topline" d="m16.68 20.386l113.67.618"/>
<path class="midline" d="m16.06 52.819l109.96.618"/>
<path class="lowline" d="m15.14 92.05l108.11.927"/></g>
</svg>

可以找到此文件的link - http://casb1.cloudapp.net/1016/1be61016ff9a717aa34c2adf7c5aa79e/icon%20test/menu%20icon.svg

如您所见（至少在 chrome 中）是单击时顶部栏会旋转，但再次单击时不会反转其动画。

我这样做是为了让我的头脑清醒过来，所以我不希望它变得那么精致（因此向量路径很草率）。

另外值得一提的是，目前我对 JS 的了解基本上是 none，但我可以接受 HTML 和 CSS。

如有任何建议，我们将不胜感激。

谢谢！

Answer 1

将 transition 属性移动到 #menuicon .topline 而不是 #menuicon.menuopen .topline。

在您的代码行中跳回，因为仅当 menuopen class 出现在元素上时才将转换应用于 #menuicon .topline，因此当您删除它时（通过 toggle() 方法）否不再应用过渡。

SVG div 在点击时旋转但在第二次点击时不旋转回来

SVG div rotates on click but then does not rotate back on second click

javascript

css

animation

svg

onclick