Animating a line drawn between 2 elements without canvas, linking by ID's

2018-04-16 admin

Hossein Narimani RadHaring10提出了一个问题:Animating a line drawn between 2 elements without canvas, linking by ID’s,或许与您遇到的问题类似。

回答者CœurPersijn给出了该问题的处理方式:

DEMO: CODEPEN

Its just plain svg and css keyframe animation. I added separate paths for each of the lines so there are separate animations for all the paths.

For timing and delay look at the animation property’s of the different paths.

Like animation: Drawpath 1s linear 2s forwards; The first number is the duration of the animation so 1 second.

2s is the delay. So there is 2 seconds of delay. Forwards is just that it keeps the end property, we don’t want our line to disappear when the animation is done.

.key-anim1 {
  -webkit-animation: Drawpath 1s linear forwards;
  animation: Drawpath 1s linear forwards;
  stroke-dasharray: 0, 100;
}
.key-anim2 {
  -webkit-animation: Drawpath 1s linear 1s forwards;
  animation: Drawpath 1s linear 1s forwards;
  stroke-dasharray: 0, 100;
}
.key-anim3 {
  -webkit-animation: Drawpath 1s linear 2s forwards;
  animation: Drawpath 1s linear 2s forwards;
  stroke-dasharray: 0, 100;
}
@-webkit-keyframes Drawpath {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 100, 100;
  }
}
@keyframes Drawpath {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 100, 100;
  }
}<svg class="test" viewbox="0 0 400 200">
  <path class="key-anim1" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M50 50, 100 100" />
  <path class="key-anim2" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M100 100, 150 100" />
  <path class="key-anim3" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M150 100, 150 150" />
  <circle r="10" cy="50" cx="50" fill="#f33" />
  <circle r="10" cy="100" cx="50" fill="#f33" />
  <circle r="10" cy="150" cx="50" fill="#f33" />
  <circle r="10" cy="50" cx="100" fill="#f33" />
  <circle r="10" cy="100" cx="100" fill="#f33" />
  <circle r="10" cy="150" cx="100" fill="#f33" />
  <circle r="10" cy="50" cx="150" fill="#f33" />
  <circle r="10" cy="100" cx="150" fill="#f33" />
  <circle r="10" cy="150" cx="150" fill="#f33" />
</svg>

希望本文对你有帮助,欢迎支持JavaScript中文网

来源:https://stackoverflow.com/questions/29549845/animating-a-line-drawn-between-2-elements-without-canvas-linking-by-ids

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-28257.html

文章标题: Animating a line drawn between 2 elements without canvas, linking by ID&apos;s

相关文章
《编写高质量JavaScript代码的68个有效方法》PDF
简介: 《Effective JavaScript:编写高质量JavaScript代码的68个有效方法》共分为7章,分别涵盖JavaScript的不同主题。第1章主要讲述最基本的主题,如版本、类型转换要点、运算符注意事项和分号局限等。第2章...
2015-10-14
《啊哈!算法》PDF
《啊哈!算法》是一本充满智慧和趣味的算法入门书。没有枯燥的描述,没有难懂的公式,一切以实际应用为出发点,通过幽默的语言配以可爱的插图来讲解算法。你更像是在阅读一个个轻松的小故事或是在玩一把趣味解谜游戏,在轻松愉悦中便掌握算法精髓,感受算法之...
2015-11-02
《Ajax 从入门到精通》PDF
简介: Ajax 由 HTML、java script™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 ——...
2015-11-16
《HTML5移动Web开发指南》(唐俊开)PDF
简介: 本书是为从未接触过HTML5新技术但同时又对移动web技术感兴趣的读者而编写的。如果你有一定的HTML开发经验,将会更容易掌握HTML5知识。本书共分为四大部分,第一部分主要讲述Web技术的发展及HTML5标准在移动Web技术中的应...
2015-10-23
《JavaScript完全自学手册》PDF
《JavaScript完全自学手册》 javascript是一种几乎得到所有浏览器支持的脚本语言,用于实现客户端与浏览者的互动。随着互联网的发展,早期的静态网页已远不能满足需要。客户端脚本javascript是实现动态网页的基础,也是web...
2015-10-29
《JavaScript学习指南(第2版)》PDF
《JavaScript学习指南(第2版)》通过列举JavaScript应用的最佳实践和示例,本书展示了如何将该语言集成到浏览器环境中,及如何在符合标准的网站中应用这些已通过实践验证的编码技术。 本书内容: ● JavaScript应用程序的...
2015-10-29
《HTML5揭秘》PDF
本书几乎涵盖了HTML5标准中描述的所有新特性。本书在以诙谐的文字结合生动的实例介绍HTML5特性的同时,还深入剖析其内部原理。让读者不仅知其然,而且知其所以然。无论是刚接触Web前端技术的新人,还是经验丰富的老手,只要是HTML5技术爱好...
2015-10-28
《Node即学即用》PDF
《Node即学即用》由休斯-克劳奇、威尔逊编著,《Node即学即用》讲解如何用Node构建可扩展因特网应用,是全面的实用指南,除了详细介绍Node提供的API外,还用大量篇幅介绍了服务器事件驱动开发的重要概念。内容涉及跨服务器的并发连接、非...
2015-10-29
《JavaScript应用程序经典实例》PDF
《JavaScript应用程序经典实例》懂得JavaScript语法是一回事,能够创建有用的应用程序就是另一回事了。虽然市面上有成打的JavaScript图书教你怎么做,但实际上,像本书这样,能够为网站管理员提供一整套易于使用的经典客户端J...
2015-11-03
《HTML5实战》完整版PDF
《HTML 5实战》是一本系统而全面的HTML 5教程,根据HTML 5标准的最新草案,系统地对HTML 5的所有重要知识点进行了全面的讲解。在写作方式上,本书以一种开创性的方式使理论与实践达到极好的平衡,不仅对理论知识进行了清晰而透彻的阐...
2015-10-28
回到顶部