CSS 过渡属性覆盖 SVG 元素上的 jQuery 动画时间

Posted 2023-03-06

【中文标题】CSS 过渡属性覆盖 SVG 元素上的 jQuery 动画时间

【英文标题】：CSS transition property overrides jQuery animation time on SVG element

【发布时间】：2016-03-13 22:57:00

【问题描述】：

我有一个不错的小 SVG 元素，我通过将其从 0px 到 70px 增长来制作动画。 这个元素也是一个按钮，在悬停时具有漂亮的笔画动画。我的问题是用于描边动画的 CSS 过渡属性会影响元素出现时增长速度的时间。我不希望我的悬停动画走得太快，但出现的动画太慢了。

html：

<svg   >
    <rect rx="3" y="-50" x="50"   transform="rotate(45)" fill="white"   class="timeline-button">
    </rect>
</svg>

JS：

$("rect").animate(
  width: "50%",
  height: "50%"
,100);

http://codepen.io/anon/pen/qbELqY

除了使用 jquery 手动更改转换属性之外，还有什么方法可以解决这个问题？这是一个烦人的解决方案，因为按钮将不断地被动画化并与之交互。

【参考方案1】：

其实很容易就搞定了。 我正在使用 css 过渡属性为“全部”设置动画。 我没有为所有动画制作动画，而是指定了我需要制作动画的内容，因此我将其更改为：

transition: 2s all ease;

到：

transition: stroke-dasharray 1s, stroke-width 1s, stroke-dashoffset 1s, ease;

这些属性不受 jQuery animate 命令的影响，因此它们彼此保持独立。 不过，我不确定，例如，如果我需要为笔画宽度设置动画，需要做什么。