动态线动画

Question

我遇到一些麻烦，因为动画线似乎是从一个元素绘制到另一个元素。

这就是我想要实现的目标：

当用户点击按钮时，一条线将显示为“绘制”出来，从div开始，然后结束刚刚按下的按钮。

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

那么，你们都在想什么？使用SVG的线条是个坏主意吗？或者我只是没有走这条路？

线条必须从同一个起点（div）连接到多个不同的按钮，整个过程也需要响应......只是为了让它更难一点。

有什么建议吗？

Answer 1

这个问题引起了我的兴趣。在我的日常工作中，我倾向于分三步处理问题：

1）让它工作 2）清理它 3）让它执行

第一步的结果就是这个小提琴：http://jsfiddle.net/gL96ukLx/2/

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

重点是：

• CSS转换用于处理动画
• 严重依赖jQuery偏移来获取元素的位置
• 时机很棘手，因为用户可以疯狂地点击以使事情行为不端
• 也许最好在动画完成之前禁用按钮以防止进一步点击
• 另一类＆＃34;显示＆＃34;用于提醒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

祝你好运！