javascript - 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( ) 方法) 不再应用转换。