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

Question

我有一个很好的SVG元素，我通过从0px-70px增长它来动画。这个元素也是一个按钮，在悬停时有一个很好的笔划动画。我的问题是，用于笔划动画的CSS过渡属性会影响元素出现时的增长速度。我不想我的悬停动画去太快，但出现动画是太慢了。

<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命令的影响，因此它们彼此分离。我不确定，但需要做什么，如果我需要动画的笔画宽度，例如。