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:;

    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》

巴特西

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

最新文章

热门文章