Trigger CSS transition with JavaScript

Question

Я изучаю JavaScript и получил здесь простую проблему: Я хочу вызвать анимацию CSS (Spin the blue nut), когда другой элемент зависает только через JavaSript.

Это то, что у меня до сих пор, и я не знаю, что я пропускаю в этом фрагменте кода:

$('#menu').hover(
 
    function() { 
 
    $('#nut').addClass('spin'); 
 
    }, 
 
    function() { 
 
    $('#nut').removeClass('spin'); 
 
    } 
 
);

#nut { 
 
    transform-origin: center center; 
 
    transform-style: preserve-3D; 
 
    transition: all 1s ease; 
 
} 
 

 
.spin { 
 
    transform: rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="menu" x="0px" y="0px" width="71.39px" height="71.39px" viewBox="0 0 71.39 71.39" enable-background="new 0 0 71.39 71.39" xml:space="preserve"> 
 
    <polygon id="nut" fill="#0000ff" points="66.605,53.541 35.694,71.388 4.784,53.541 4.784,17.849 35.694,0.002 66.605,17.849"/> 
 
</svg>

Я очень ценю вашу помощь! Заранее спасибо!

Answer 1

Единственное, что отсутствует, - это jquery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<svg id="menu" x="0px" y="0px" width="71.39px" height="71.39px" viewBox="0 0 71.39 71.39" enable-background="new 0 0 71.39 71.39" xml:space="preserve"> 
    <polygon id="nut" fill="#0000ff" points="66.605,53.541 35.694,71.388 4.784,53.541 4.784,17.849 35.694,0.002 66.605,17.849"/> 
</svg> 

Взгляните на этот код работает здесь:

https://jsfiddle.net/j2bon1gc/

На самом деле это не только не хватало Jquery, но для того, чтобы работать это специально не хватало JQuery версии выше 2.2, которая была версия, которая реализовала эту функцию.

Посмотрите здесь: jQuery SVG, why can't I addClass?

И в Meta вопрос, который я открыл для этого: Why isn't jQuery working in this question's code snippet?