Added support for animating line drawing

[jeremysnyder]

I needed this for an application I was working on, and after several iterations, it seems to be working pretty well. I am using a SVG animation trick that I found on the web that uses the browser to determine the line length, and then uses an SVG animate tag to do the actual animation, so Javascript is ONLY used to determine the length of the line, and all animation is done in native SVG markup.

Also added some code to generate an ID for the SVG line, so that it can be used to chain the animation of the arrow and arrowhead. You can provide an ID in the <Xarrow /> tag or let the component generate one for you.

I tested this with all three types of paths. Since the line length is being calculated by the browser, animation seems to work well on all path types.

Open to suggestions on the API, at this point, the only customization is to turn on animation, and determine the duration of the animation.

[Eliav2]

Hey friend, thank for the first pull request, looking great! In the next few days I'm quite busy but when I will have some free time I will review It!

(From first glance looking good!)

[jeremysnyder]

Happy to help, and happy to make updates based on your suggestions, when you get some time.

[Eliav2]

checkout the improvemts.

few notes:

• merged changes from dev branch.
• id property was removed. refs is used instead when needed. id was used only as inner-component-svg reference for the animations.
• dashed line and drawing arrow can be combined.
• negative values accepted.
• type of property changed from 'string' to number, using seconds as unit.

what do you think? any notes? maybe need to add property show so animation of disappearing will be triggered when unmounting xarrow

[Eliav2]

the changes merged to dev branch.