Question

这是我使用SVG路径设置动画的实验 - http://codepen.io/alahab/pen/mydxLK。

function simulatePathDrawing(path) {
  //var path = document.querySelector('.squiggle-animated path');

  var length = path.getTotalLength();
  // Clear any previous transition
  path.style.transition = path.style.WebkitTransition = 'none';

  // Set up the starting positions
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;

  // Trigger a layout so styles are calculated & the browser
  // picks up the starting position before animating
  path.getBoundingClientRect();
  // Define our transition
  path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 5s ease-in-out';

  // Go
  path.style.stroke = '#fff';
  path.style.strokeDashoffset = '0';
  path.style.strokeWidth = '1px';
  path.style.fill = '#333';

}

var chars = $('.squiggle-animated path').on('mouseover', function(e) {
  simulatePathDrawing(this);
});

如您所见，当页面加载路径的颜色为灰色时，鼠标悬停时它会变为白色。但我希望它在绘制线条/执行完成时更改为灰色。我该怎么做？

此外，如果路径未完成绘制并且您将鼠标移离形状，则会将路径绘制两次。为什么会这样？

Answer 1

这里发生了一些事情：

鼠标悬停发生在1px宽度路径上...所以如果你移动到图像的中间，观察动画，然后将鼠标移出图像，再次越过线，重新触发动画
动画触发/完成后，您需要删除鼠标悬停事件（可能使用.off（））

看起来很酷！

使用Jquery更改SVG路径行为

1 个答案: