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

如此简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的一个坑的更多相关文章

  1. UC手机浏览器js加入收藏夹

    概述 对于某些网站来说,让用户一键把网页加入收藏夹的设计是非常棒的,它能提醒用户把网页加入收藏夹,从而增加用户的回访率,使网站获得更多的流量. 在PC端,只有ie和ff支持用js把网页加入收藏夹的操作 ...

  2. UC手机浏览器(U3内核)相关文档整理

    Note:绝大多数API在IOS版下不支持,使用前请自行测试. UC官方的开发者中心:http://www.uc.cn/business/developer.shtml U3内核定制<meta& ...

  3. 解决UC手机字体变大的有关问题

    解决UC手机字体变大的问题 UC手机浏览器在识别到页面文字很多的情况下会自动放大字体优化阅读体验,如果要关闭这个功能需要在网页头部添加: <meta name="wap-font-sc ...

  4. 3分钟教你做一个iphone手机浏览器

    3分钟教你做一个iphone手机浏览器 第一步:新建一个Single View工程: 第二步:新建好工程,关闭arc. 第三步:拖放一个Text Field 一个UIButton 和一个 UIWebV ...

  5. 通过userAgent判断手机浏览器类型

    我们可以通过userAgent来判断,比如检测某些关键字,例如:AppleWebKit*****Mobile或AppleWebKit,需要注意的是有些浏览器的userAgent中并不包含AppleWe ...

  6. wp8手机浏览器项目

    项目需求如下: 1.页面布局 最上方为搜索/网址框 中间为网页显示区,默认主页为百度搜索 最下方为功能栏,分别有后退,前进,窗口和更多功能 在更多功能中有 分享给好友 发送网址到桌面 查看历史记录等 ...

  7. 手机浏览器自动播放视频video(设置autoplay无效)的解决方案

    1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...

  8. 手机浏览器通过Scheme跳转APP,兼容各种手机浏览器

    一个比较完整的产品线,必定有APP和网站,另外还有微信公众号网页和小程序.那么有一个比较常见的需求就是在手机浏览器内打开APP,实现起来也比较简单,只要APP配置的有URLScheme即可. 但是因为 ...

  9. 华为手机浏览器不支持PUT提交方式的解决方案

    最近所在技术团队在开发webapp项目,前端angularjs+后端.Net MVC API,API登录接口定义为PUT提交方式,在做兼容测试时发现UC.safari.微信浏览器下都可以登录,但在华为 ...

随机推荐

  1. 从DOS bat启动停止SQL Server (MSSQLSERVER)服务

     由于机器上装了SQL Server2008,导致机器开机变慢,没办法只能让SQL Server (MSSQLSERVER) 服务默认不启动.但是每次要使用SQL Server时就必须从控制面板-管理 ...

  2. Tagging Physical Resources in a Cloud Computing Environment

    A cloud system may create physical resource tags to store relationships between cloud computing offe ...

  3. 中英文对照 —— 手机 App/PC 端软件(系统)、互联网

    0. 经典 & 缩略词 SMS:short message service,短信息服务, SMS code,短信验证码: swipe:vt. 猛击:偷窃:刷-卡 Swipe up/down/r ...

  4. 好玩的WPF第三弹:颤抖吧,地球!消失吧,地球!

    原文:好玩的WPF第三弹:颤抖吧,地球!消失吧,地球! 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.csdn.net ...

  5. malloc()与calloc差异

    Both the malloc() and the calloc() functions are used to allocate dynamic memory. Each operates slig ...

  6. HTTP协议知识点 (11个知识点,比较详细)

    (一)   对象更新校验方式: HTTP通过两种方式验证对象是否有更新if-non-match 或者 if-modified-since. 通过在Request中包含上述header向服务器发起询问. ...

  7. NSURLSession 网络库 - 原生系统送给我们的礼物

    大家在进行iOS开发的时候一定会用到网络操作.但由于早期原生的 NSURLConnection 操作起来有很多不便,使得大家更愿意使用第三方库的解决方案,比如鼎鼎大名的 AFNetworking.正是 ...

  8. Fidder模拟发送请求

    在Fiddler的Composer一栏,可以模拟请求 举例 首先通过浏览器访问页面http://baidu.com/ ,在右侧可以拿到请求情况 在Inspectors一栏可以看到请求和响应结果,复制请 ...

  9. 工具:sql server profiler(分析器)

    打开profiler新建->连接数据库进行监测 任何访问该数据库的都有记录   image 对于linq的检验:sql实际如何->运行程序,查看分析器记录   image         ...

  10. TVideoCapture类的源码,继承TCustomPanel,用于视频捕获(用到了SendMessage和SetWindowPos等API)good

    unit VideoCapture; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, ...