最近做一個項目，應用在移動端，其中涉及一個評論組件。按照現有的趨勢，是有評論的地方必有點贊。當然我們的組件也未免于難。大概操作部分設計如下

如此簡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控制動態添加還是好一點，為了效果的統一折中取方案）。