CSS转换属性覆盖SVG元素上的jQuery动画时间

Question

我有一个很好的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手动更改transition属性之外，还有什么方法可以解决这个问题吗？这是一个令人讨厌的解决方案，因为按钮将不断地被设置动画并与之交互。

Answer 1

实际上很容易就解决了这个问题。我使用css转换属性为"all"设置动画。我没有制作所有的动画，而是指定了我需要制作的动画，所以我把它从改为

transition: 2s all ease;

至：

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

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