如何让SVG线动画与多个路径一起使用

时间:2016-10-27 15:10:53

标签: javascript jquery css animation svg

我研究了这些:https://css-tricks.com/svg-line-animation-works/

https://jakearchibald.com/2013/animated-line-drawing-svg

使用Html5blank主题。我的javascript代码是:

(function ($, root, undefined) {
	$(function () {
		'use strict';
		// DOM ready, take it away
   var paths = document.querySelectorAll('path.letter');
[].forEach.call(paths, function(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 2s ease-in-out';
  // Go!
  path.style.strokeDashoffset = '0';
})                    
  });
    })(jQuery, this);

0 个答案:

没有答案