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手動改變轉移財產？這是一個令人討厭的解決方案，因爲按鈕會不斷動畫並與之交互。

Answer 1

其實真的很容易想出這一個。 我使用css transition屬性爲'all'動畫。 相反動畫所有，我只是規定我需要什麼樣的動畫，所以我改變它：

transition: 2s all ease; 

到：

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

這些性能並沒有受到jQuery的動畫命令，使他們保持獨立從彼此。 雖然我不確定，但如果需要爲例如筆畫寬度設置動畫，需要做些什麼。