uc手机浏览器使用animation的一个坑

最近作一个项目，应用在移动端，其中涉及一个评论组件。按照现有的趋势，是有评论的地方必有点赞。固然咱们的组件也未免于难。大概操做部分设计以下

如此简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过来也能够的！真是奇了怪了，没办法谁让在下叶良辰，我有一百个方法找出问题所在！在默默地给刚才的装逼打满分的时候想到，成功动画的页面没有一个是操做伪元素的！！！是否是这个缘由呢？后来将伪元素去掉，在全部点赞的按钮下埋了<i>+1</i>这行代码。而后作动画，测试！竟然ok了！！！干！！！

uc不支持伪元素使用animation动画

不能太激动，先把解决方案应用到项目上（虽然页面多了i的标签，相比js控制动态添加仍是好一点，为了效果的统一折中取方案）。

哈哈哈~终于能够在本身的秘籍上写上一章《论我良辰如何战胜赵日天 之 我知道uc伪元素应用css3动画bug》