Javascript动画问题-转换不起作用

我正在尝试仅使用JavaScript（无CSS）在页面上设置SVG动画。但是，转换没有应用延迟

dot.style.transition = "all 0.4s ease";
dot.style.transform = "translateY(-5px)";

这会导致其translateY被应用，但不会被转换。这是为什么？我如何避免

Svg似乎完全被窃听了

编辑：修复了0.4s上的打字错误-这不是问题所在

编辑3：已解决，利用requestAnimationFrame

---

您的

0.4

上缺少该单元。应为

0.4s

这里有一个有效的例子。单击点：

var dot=document.getElementById（'dot'）；
dot.addEventListener（'click'，function（）{
dot.style.transition=“所有0.4s轻松”；
dot.style.transform=“translateY（-5px）”；
});
#点{
背景：#000；
边界半径：50%；
高度：1米；
宽度：1米；
}
更新
在
标签上支持
转换
，但在Chrome上存在缺陷。演示3的操作代码有2个调整：


隐藏原始svg的
已更改如下：


删除了
样式
属性
添加了以下类：

.svg {
  position:relative;
  left:-999px;
}




display:none
不起作用的原因是，在Chrome中，主SVG需要重新绘制，然后让
克隆模拟它<代码>显示：无

从文档流中删除主文件。因此，通过将主SVG保留在DOM中，但不让人看到，您可以在其上实现CSS的魔力，

应该可以很好地发挥作用

看

---

古老的 好的，这个问题已经解决了，当然可以在SVG上使用

transform:translate

。我已经删除了

，并将真正的SVG压缩到48x48

有关使用

setAttributeNS（）

设置SVG路径动画的更好方法，请参见演示2。如果你仍然想用你曾经尝试过的方式（不推荐）使用

，你需要熟悉这个奇妙的世界

请参见不带

的和带

的

此堆栈片段不起作用请参见和与

演示1（不起作用，请参见不带代码）

var firstDot=document.querySelector（#图标省略号>路径：第n个子项（2）”）
firstDot.style.transition=“所有1s轻松”；
firstDot.style.transform=“translateY（-5px）”；
//为什么它不滑入translateY（-5px；）
var div=document.getElementById（“div”）；
div.style.transition=“所有1s轻松”；
div.style.transform=“translateY（10px）”；
//div工作正常，可滑动到位。

#包装器{
高度：48px；
宽度：48px；
}
#div{
宽度：50px；
高度：50px；
背景颜色：浅珊瑚；
}

测试Div而不是svg。

已修复

谢谢大家的回答，谢谢你们的反馈。现在我知道了过渡不是一个可行的解决方案，我用这个解决了我的问题

如果有人有一个解决方案，可以使用javascript函数以更少的逻辑抖动点（我的将很快运行“onMouseCenter”），那将非常感谢

非常感谢，请一定查看我的Fiddlr，在那里我利用“requestAnimationFrame”并在其自身上循环，在每次循环中，我都会以微小的数量更改其静态translateY

const jiggle=（）=>{
常量点=（document.queryselectoral（#icon省略号>path.icon省略号点”））
设延时=100；
[]forEach.call（点，（点，i）=>{
jsRequestAnimationFrame（延迟，点，（）=>{
jsRequestAnimationFrame（延迟，点，（）=>{
返回；
}，对）；
}，假）；
延迟=延迟+75；
});
}
常量jsRequestAnimationFrame=（超时、元素、cb、模式）=>{
让firstLoad=true；
释放新的时间；
常数刻度=（时间）=>{
如果（首次加载）{
newTimeout=超时+时间；
firstLoad=false；
}
//如果时间>=newTimeout，我们完成了循环，那么是时候运行回调并离开了。
如果（time>=newTimeout）返回cb（）；
常量计算像素=（）=>{
如果（模式）返回4-（4*（1-（newTimeout-time）/超时））；
返回4*（1-（newTimeout-time）/超时）；
};
element.style.transform=`translateY（${（calculatePixels（））}px）`；
requestAnimationFrame（勾号）；
};
requestAnimationFrame（勾号）；
};
document.getElementById（“btn”）.addEventListener（“单击”，抖动）
抖动（）
#包装器{
高度：48px；
宽度：48px；
}
#div{
宽度：50像素
高度：50px
背景颜色：浅珊瑚；
}

抖动：）
…可能
0.4s
？添加了fiddlr以证明这不是问题所在。抱歉，刚才测试了小提琴，文本应该移动正确吗？将转换速度减慢到1s，你就会看到它工作了。@JonUleis从
中删除了
显示：none
，SVG移动得很好。对不起，我的意思是通过“Use”标记，以单个路径为目标，translatey添加了fiddlr以证明这不是问题，对不起，这是一个打字错误。这是SVG使用元素和javascript的一个问题，它让我花了好几个小时才明白now@ShanonJackson它确实有效，请看我的@JonUleis，为什么你会说
transform:translate
在SVG上不起作用？@zer00ne我没有意识到SVG是如何隐藏的，并在这里用
实现的。谢谢你指出这一点。我已经删除了我的错误假设，这些假设是基于OP最初的JSFIDLE的。谢谢你的帮助，guysDemo 3正是我想要的谢谢。这是需要解决的最棘手的问题。Document.getElementById。。。或者getElementsByClassName不能在use标记中作为目标，但是querySelector可以。显示：精灵工作表上无停止转换
jiggle();