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中），顶部栏会在单击时旋转，但在再次单击时不会反转其动画。

我这样做是为了让我的头脑能够解决问题所以我并不是想要让它变得那么精致（因此那些邋vector的矢量路径）。

另外值得一提的是，我对JS的了解基本上没有，但我对HTML和CSS没问题。

非常感谢任何建议。

谢谢！

Answer 1

将transition属性移至#menuicon .topline而非#menuicon.menuopen .topline。

在您的代码行中跳转，因为仅当#menuicon .topline类在元素上显示时才会转换为menuopen，因此当您删除它时（通过toggle()方法）不再应用转换。< / p>

SVG div在单击时旋转，但在第二次单击时不会向后旋转

1 个答案: