使用 snap.svg IE 和 EDGE 网络浏览器快速悬停时放大/缩小动画

Question

我无法理解，为什么 IE 和 EDGE 有奇怪的行为。 如果您快速将鼠标移出五角星 - 动画是有距离的，但在其他正常的网络浏览器中一切正常。 http://jsfiddle.net/b1Lhjo4k/

var svgElement = Snap("#svg");
var pent = svgElement.select('#pentagram-one');
var hoverover = function() {
    pent.stop().animate({transform: 'r180,500,515'}, 400);
};
var hoverout  = function() {
    pent.stop().animate({transform: 'r0,500,515'}, 400);
};
pent.hover(hoverover, hoverout);

---

通过原型函数解决； ie 和 edge 现在可以正常工作了。

Answer 1

我没有 Edge 来测试，但我怀疑它是因为它在前一个动画完成之前开始动画时使用矩阵/变换插值做了一些时髦的事情（这可能是错误的，但最初的想法是什么看看），或者有时我在 IE 中看到过非常小的数字字符串可能会有些奇怪。

解决此问题的一种方法是不要让 Snap 使用浏览器矩阵值进行插值，而是自己控制它。你可以尝试一个小插件，如果你会经常使用它，像这样......

Snap.plugin( function( Snap, Element, Paper, global ) {

    Element.prototype.animRotate = function( from, to, dur ) {
       var el = this;
       this.stop();
       Snap.animate(from, to, function( val ) {
           el.transform('r' + val + ',500,515')
       },dur)
       return this;
    };
});

var pent = svgElement.select('#pentagram-one');

var hoverover = function() {
    this.animRotate(0, 180, 400)    
};
var hoverout  = function() {
    this.animRotate(180, 0, 400)
};

jsfiddle