最近做一个项目，应用在移动端，其中涉及一个评论组件。按照现有的趋势，是有评论的地方必有点赞。当然我们的组件也未免于难。大概操作部分设计如下
如此简low的设计，点个赞加个一这效果实在是简直是捞比啊！！！_(:з」∠)_（我知道设计不会看到这篇文章）
怎么办，一世英名不能毁于此啊(╯‵□′)╯︵┻━┻，如果加个动画会不会挽回点颜面？
卧槽，这样一个45度角仰望天空上扬的‘+1’的1s动画总算是有点潮！
狗尾续貂开干吧！衣裤！
大体方案有两种：方案一 js动态添加节点（+1），然后控制css变换。方案二 利用css3 animation实现动画。
考虑移动端css3支持度较好，性能也比用js控制的要好，果断选方案二！动画的实现很好说，keyframe定义动画就好了，这个‘+1’怎么引入呢，不想用到js。。。页面直接埋点？增加页面dom结构貌似也是不好的--、
诶~伪元素：after,:before ,定义在css里，也不会增加dom结构O(∩_∩)O~~
就这么干！~\(≧▽≦)/~
先初始化好位置
&:after{
content:(+1);
display:block;
position:absolute;
top:0;
right:5px;
font-style:normal;
color:rgba(255,115,0,0);
}
在定义好动画
.keyframes(
~'up,
0%{color:rgba(255,115,0,0);transform:translate3d(0,5px,0);}
50%{color:rgba(255,115,0,1);transform:translate3d(5px,-7px,0);}
100%{color:rgba(255,115,0,0);transform:translate3d(10px,-15px,0)}'
);
再添加上动画
&.rise:after{
.animation(up 1s linear);
}
(以上代码用了less和lesshat)
哦了，只要点击的时候给元素添加rise这个类就好啦。测试！
chrome okay！
qq ok!
自带浏览器 ok！
uc ... uc ...uc ...尼玛你倒是飞啊！(╯‵□′)╯︵┻━┻
算了，uc这个坑，前面吐槽多了，应该是见怪不怪了。。。排查问题吧。
首先想到是不支持translate3d,去掉换成操作top，right依然无效，况且很多别的页面看到有用到的，难道是animation哪些属性没写全？后来参照成功动画的页面把属性补全依然不行。。。后来翻看多个页面发现都能实现animation在uc上动画的。我自己把页面copy过来也可以的！真是奇了怪了，没办法谁让在下叶良辰，我有一百个方法找出问题所在！在默默地给刚才的装逼打满分的时候想到，成功动画的页面没有一个是操作伪元素的！！！是不是这个原因呢？后来将伪元素去掉，在所有点赞的按钮下埋了+1这行代码。然后做动画，测试！居然ok了！！！干！！！
uc不支持伪元素使用animation动画
不能太激动，先把解决方案应用到项目上（虽然页面多了i的标签，相比js控制动态添加还是好一点，为了效果的统一折中取方案）。
网友评论