使用JavaScript触发CSS转换

Trigger CSS transition with JavaScript

本文关键字：转换 CSS 触发 JavaScript 使用      更新时间：2023-09-26

我正在学习JavaScript，这里有一个简单的问题：当另一个元素通过JavaSripp ONLY悬停时，我想触发一个CSS动画（旋转蓝色螺母）。

这就是我到目前为止所得到的，我不知道我在这个片段中缺少了什么：

$('#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>

我真的很感谢你的帮助！提前感谢！

唯一缺少的是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，而且为了工作，它特别缺少一个大于2.2的Jquery版本，也就是实现该功能的版本。

看看这里：jQuerySVG，为什么可以'；我不添加Class吗？

在Meta问题中，我提出了这样的问题：为什么'；tjQuery正在处理这个问题'；s的代码片段？

相关文章：