使用 JavaScript 触发 CSS 转换 [重复]

Posted 2023-03-06

【中文标题】使用 JavaScript 触发 CSS 转换 [重复]

【英文标题】：Trigger CSS transition with JavaScript [duplicate]

【发布时间】：2016-08-29 05:08:44

【问题描述】：

我正在学习 javascript，遇到了一个简单的问题： 当另一个元素仅通过 JavaSript 悬停时，我想触发 CSS 动画（旋转蓝色螺母）。

这是我到目前为止所得到的，我不知道我在这个 sn-p 中缺少什么：

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

非常感谢您的帮助！提前致谢！

【参考方案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"   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版本，也就是实现这个功能的版本。

看这里：jQuery SVG, why can't I addClass?

在我为此打开的元问题中：Why isn't jQuery working in this question's code snippet?

【讨论】：

效果很好，但这听起来可能很奇怪......我在 sn-p O_o 上安装 jQuery 并没有得到相同的效果（参见编辑后的帖子）

应该只是一些url访问的东西。

应该可以的。我在 meta 中打开了一个关于这个问题的问题：meta.***.com/questions/322366/…