就在这样不算浓郁的过年气息中，更新第二篇每周一个前端动画系列。
今天地铁上人明显少了很多，大家相视而笑，互相点头示意但是眼神坚定。因为他们知道，只有共和国最优秀的人才，各部门最重要的岗位才会在这个时候出现在这个车厢里.拖着行李箱的人羞愧的低下了头，但是没有人责怪他们，毕竟每个人的能力都是有限的，与其让他们继续工作，不如放他们回家过年。
本文分析实现的某些效果，仅仅作为一个思路分享，仅仅作为学习素材使用。
源动画效果
结合上一篇的球队logo的展示，在其下方放置了一个bar，用来展示球队的支持率。这条支持率显示bar可以点击，为球队增加支持率。这个效果展示如下：
实现分析
经过观察可发现：
- 动画左右对称，实现一边即可
- 点击时支持率的变化是宽度的变化，两方占有的宽度是按照比例（支持人数/总人数）设置的，点击时该队的支持人数和总人数同时改变
- 红蓝相连接的地方是一个斜角，这里的实现可以用到
border-width的一个技巧 - 点击是“+1”效果是一个放大动画
分析完这些怎么样，是不是已经有思路了，来让我们看代码。
代码实现
宽度改变效果
注意点击时候需要将支持数和总数同时加1，然后根据此数量修改支持率的宽度。
one.width(oneValue / allVote * 100 + "%");
other.width(100 - oneValue / allVote * 100 + "%");
倾斜角的实现
倾斜角一般我们都是通过-webkit-transform:rotate(xxdeg)实现，但是该方式在设置两个不同颜色时候显得不是那么的方便。上面说到我们可以利用border-width技巧实现这个倾斜角。当我们设置一个元素的width,height都为0的时候，我们设置的border-width将进行占位，该属性设置的值将会平分该块，假如将左右块重复，效果可以展示为如下：
这时只要设置其他部分边框的颜色为透明，就可以实现这个倾斜角的效果。
设置代码如下
.team-vs-bar .bar-a:after, .team-vs-bar .bar-b:after {
position: absolute;
display: block;
height: 0;
width: 0;
border-style: solid;
border-width: 20px;
border-color: transparent;
-webkit-transform: rotate(-15deg)
}
.team-vs-bar .bar-a:after {
border-top-color: #c93c5d;
right: -20px;
top: 0;
z-index: 1
}
.team-vs-bar .bar-b:after {
border-bottom-color: #306dca;
left: -20px;
bottom: 0
}
“+1”动效的实现
继续使用关键帧，可以进行如下的设置，注意每次点击时候需要将未完成的动画清除掉，只显示最后一次。
@-webkit-keyframes bar_plus {
0% {
opacity: 0;
-webkit-transform: scale(0)
}
50% {
opacity: 1
}
60% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: scale(1.4)
}
}
效果展示
关键点解读
本文的关键点的实现除了“+1”动效，就是倾斜角的实现。“+1”动效依然可以使用关键帧实现，而倾斜角使用after伪类以及border-width的方法进行实现的方式希望可以给大家带来新鲜的感觉。代码已上传到github，欢迎提出Issues。
最后的惯例，贴上我的博客，欢迎关注
