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>

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

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

我这样做是为了让我的头脑了解事物，所以我不希望它变得那么精致（因此草率的矢量路径）。

另外值得一提的是，目前我对 JS 的了解基本上是一无所知，但我对 HTML 和 CSS 还算满意。

任何建议将不胜感激。

谢谢！

Answer 1

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

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