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

Как вы можете видеть (в хроме, по крайней мере), что верхняя панель будет вращаться при нажатии, но то при повторном нажатии не будет изменяться анимация.

Я делаю это как испытание, чтобы получить голову вокруг вещей, поэтому я не ищу, чтобы это было все, что было усовершенствовано (отсюда и неряшливые векторные пути).

Также стоит упомянуть, что в настоящее время я знаю JS, в основном, нет, но я в порядке с HTML и CSS.

Любой совет будет очень благодарен.

Спасибо!

Answer 1

Перемещение transition Недвижимость #menuicon .topline вместо #menuicon.menuopen .topline.

В вашей строке кода отскакивает назад, потому что переходы применяются к #menuicon .topline только тогда, когда menuopen класса, представленные на элементе поэтому при удалении его (по toggle() методом) никакого перехода не применяется больше.