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》