jquery - 动态线条动画

Question

我在使动画线条看起来像是从一个元素绘制到另一个元素时遇到了一些麻烦。

这是我要实现的目标:

当用户点击按钮时，会出现一条线，从 div 开始，到刚刚按下的按钮结束。

我尝试使用 Svg 实现这一点，绝对定位在元素内，然后使用 stroke-dashoffset hack 使它们看起来像是被绘制的，但我无法动态改变使用 jQuery 的中间 SVG 行。

那么，大家怎么看呢？将 SVG 用于线条是个坏主意吗？或者我只是没有走在正确的道路上？

这些线必须从同一个起点(div)连接到多个不同的按钮，并且整个事情也必须响应式地工作......只是让它变得有点困难。

有什么建议吗？

Answer 1

这个问题让我很感兴趣。在我的日常工作中，我倾向于分三步处理问题:

1) 让它发挥作用2)清理它3) 让它执行

第一步的结果在这个 fiddle 中:http://jsfiddle.net/gL96ukLx/2/

它仅使用 CSS 和 jQuery 来执行线条并执行您请求的动画。

亮点是:

• CSS 过渡用于处理动画
• 严重依赖 jQuery 偏移量来获取元素的位置
• 时间安排很棘手，因为用户可能会疯狂地点击，让事情变得不正常
• 也许在动画完成之前禁用按钮以防止进一步点击会更好
• “显示”的附加类用于提醒 CSS 动画转换
• 细div用于垂直线，短div用于水平线

这是结果的主要部分:

vert1
    .addClass('showing')
    .css(
    {   height: vertHeight,
        top: vertline1Top,
        left: vertline1Left
    });
    horz
        .addClass('showing')
        .css(
        {   width: horzWidth,
            left: vertline1Left,
            top: (vertline1Top + vertHeight)
        });
    vert2
        .addClass('showing')
        .css(
        {   height: vertHeight,
            left: vertline2Left,
            top: (vertline1Top + vertHeight)
        });

我设置了三个 div 中每一个的位置和长度/宽度:vert1、vert2 和 horz。 CSS 过渡将在一秒钟内动画化大小的变化。我呈现没有延迟的第一条垂直线，延迟 1 秒的水平线(绘制第一条垂直线所花费的时间)，以及延迟 2 秒的第二条垂直线(绘制第一条垂直线所花费的时间)线和要绘制的水平线)。

请注意!这是一个快速而肮脏的概念证明，表明可以使用 jQuery 和 CSS 实现结果。它可能适合也可能不适合您的个人需要。我什至没有考虑过我流程中的第 2 步。 :P

祝你好运!