Question

我尝试使用raphael的动画使用鼠标输入/离开为元素设置动画，如下所示：raphaelElement.animate（{transform：“... S1.6,1.6”}，25，'bounce'） mouseenter和raphaelElement.animate（{transform：“t0,0”}，25，'bounce'）;用于mouseleave。在http://jsfiddle.net/junca/Q4L6T/

进行演示

var canvas = Raphael(document.getElementById("canvas"), 100, 100);

var rect = canvas.rect(1, 1, 50, 50);
rect.attr({'fill': 'red'});

hoverFunc = function() {
    rect.animate({transform: "...s1.6,1.6"}, 500, 'bounce');
    console.log('mouse enter');
};
hideFunc = function() {
    rect.animate({transform: "t0, 0"}, 500, 'bounce');      
    console.log('mouse leave');
};
rect.hover(hoverFunc, hideFunc);

问题是当快速前后快速移动鼠标时，元素会变得越来越大。

感谢。

Answer 1

不是使用'...'表示法来添加变换，我怀疑你想删除它，而是包含原始的变换字符串，所以它总是重新开始。

所以而不是

rect.animate({transform: "...s1.6,1.6"}, 500, 'bounce');

试

rect.animate({transform:  originalForm.toString() + "s1.6,1.6"}, 500, 'bounce');

我还纠正了小提琴here

中的一些拼写错误

Raphael Animation - 在元素上快速移动鼠标时，元素变大

1 个答案: