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

【问题标题】：CSS transition property overrides jQuery animation time on SVG elementCSS 过渡属性覆盖 SVG 元素上的 jQuery 动画时间
【发布时间】：2016-03-13 22:57:00
【问题描述】：

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

HTML：

<svg width="141" height="141" >
    <rect rx="3" y="-50" x="50" width="0" height="0" 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 手动更改转换属性之外，还有什么方法可以解决这个问题？这是一个烦人的解决方案，因为按钮将不断地被动画化并与之交互。

【问题讨论】：

标签： svg jquery-animate css-transitions

【解决方案1】：

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

transition: 2s all ease;

到：

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

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

【讨论】：