对于SVG路径动画，我相信大家都看到过这样的动效：一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱，他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上讨论过这种技术。Polygon使用它在一篇设计方面的文章里创建出了非常神奇的效果。Codrops也有很多非常酷的案例。在这篇文章中，我并没有什么要补充的，只是想把这种技术阐述的更简易些。所以，在这里我用我的方式把这种技术再次向大家阐述一遍。

在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalLength()获取到路径的长度），在@keframes中的100%处设置stroke-dashoffset的值为0就可以实现线条自画的一个动画效果。原理很简单，但在上一篇文章中，看到的仅是一条路径（也就是一条线的自画效果），如果我们想对一图形进行依次自动动效呢？其实也是可以实现的。今天我们在这篇文章中就来学习一下，怎么实现。

进度条是我们在Web中经常看到的一种效果，常见的进度条有水平横条和径向圆形的进度条。今天我们来看看怎么使用SVG来实现进度条的效果。使用SVG可以很容易的实现，也易于理解，最主要是使用SVG实现的进度条具有良好的跨浏览器，并且能根据浏览器屏幕尺寸很好的显示。

有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为了新项目中能更完美的使用vw来做移动端的适配。探讨出一种能解决不兼容viewport单位的方案。今天整理一下，与大家一起分享。如果方案中存在一定的缺陷，欢迎大家一起拍正。

在上一节中，学习了怎么利用SVG的stroke-dasharray和stroke-dashoffset来制作进度条。记得在文章末尾留了一个悬念，说这一节中，要聊聊怎么用Vue来把这个SVG的进度封装成组件。咱们先不聊Vue怎么把这个封装成组件（我搜索了一下，有现在所这方面组件，而且做得蛮好的，接下来先学习一下）。今天接着聊上一节中的进度条怎么来实现。不过略有不同。不同点来自于网上一位朋友向我提的一个问题。

Modal弹框在Web应用或者Web页面上非常常见，很多时候在不同的项目都会重写这样的一个Modal弹框。为了能偷懒，思考了一下，能不能写一个组件，比如说使用Vue创建一个组件，一个Modal组件，让其能在各个Web页面或者应用上使用。在这篇文章中，学习一下如何使用transition和slots来创建可重用的Modal组件。

从这一节开始正式进入对Vue 2.0组件的系统学习。在Vue中，组件是最强大的功能之一。而且Vue组件涉及到的知识点也非常的多，比如组件的使用，prop、事件、slots以及动态动组等等。在一节的内容中无法全部涵盖这些知识点。所以将会分几节内容来整理Vue组件中的学习笔记。

在上一节中，咱们学习了Vue中怎么创建组件。在这篇文章中我们以按钮组件为例，了解了怎么注册全局组件和局部组件。并且通过这些基础知识，可以轻易的创建类似于HTML中button元素效果的按钮组件。但这个组件非常的简陋，和我们想像的组件相差甚远。那么今天我们来看看，怎么在Vue中创建一个按钮组件。

通过上一节中的学习，咱们了解了在Vue中怎么创建组件和使用组件。在项目中使用组件，目的一般就是提高代码复用率，增强模块化，从而降低开发成本。在文章结尾处，我们提到了Vue中组合组件，就是A组件中包含了B组件。而组件与组件之间的相互使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢？这就是这一节将要了解和学习的内容。

今天是回来上班的第一天，在Codepen上看到一个CSS写的效果。一个段落的每行文本是渐变效果。对于单行文本或单个词实现渐变填充效果并不是什么奇怪的事情，不过对于一个段落的每一行实现一个文本渐变填充的效果。估计还是会令很多人感到好奇。如果你是其中好奇的一员，请继续往下阅读，一探其中之究竟！