javascript - 没有 .animate() jQuery 的最干净的动画方式是什么？

Question

我有一个不错的主意，即使用可用于 SVG 对象的“stroke-dasharray”CSS 属性来描边页面上的路径，从而以一种漂亮的艺术方式呈现形状。

p>

它运行完美，并得到大多数现代浏览器和手机的支持。

可以在这里找到我所做的一个很好的 jsfiddle:http://jsfiddle.net/G6ECE/

现在让整个事情发生变化的代码:

   num=0;
   setInterval(function(){
       updateStroke(num);
       num+= 0.2;
   }, 1);
   function updateStroke(num){

       // stroke-dasharray is a list of two or more numbers. In this example, percentage values are used to make all paths fully stroked at the end of the animation, irregardless of path length.
       $('svg path').css({stroke:'#00FF00','stroke-dasharray':num+'% '+(100-num)+'%'});
   }

显然，这是一种非常基本、丑陋的动画方式。

我想稍微自定义一下动画:我希望能够添加自定义动画长度并使用不同的缓动。不幸的是，我通常用来为 CSS 属性设置动画的 jQuery $().animate() 函数不支持非数字值。

作为stroke-dasharray使用两个或多个数字(像素或百分比)值来工作，我需要 .animate() 的替代方法

最干净的方法是什么？ (尽可能多地使用现有的 jQuery 功能，尽可能少地重新发明一个动画框架)

Answer 1

CSS 过渡效果如何？它们还具有比 jQuery 动画更好的性能。

http://www.w3schools.com/css/css3_transitions.asp

但请确保不要将两者用于同一个属性，因为 jQuery 动画会干扰 CSS 过渡。