javascript - 手機qq的讚功能實現原理？

Question

按讚後數字飛起來的動畫，怎麼實現的？

Answer 1

本來想貼程式碼，有點長 麻煩

我的煮飯是把彈出變大的那個數字單獨給一個p

然後給這個p加動畫的樣式

js檔案抽離有點麻煩，給你看我的css的
`
/點讚/
@-webkit-keyframes niceIn {

0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}
50% {
    opacity: 1;
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}
70% {
    -webkit-transform: scale(.8);
    transform: scale(.8)
}
100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

}
@keyframes niceIn {

0% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}
50% {
    opacity: 1;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
}
70% {
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8)
}
100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

}

@-o-keyframes niceIn{

0% {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
}
50% {
    opacity: 1;
    -o-transform: scale(1.5);
    transform: scale(1.5)
}
70% {
    -o-transform: scale(.8);
    transform: scale(.8)
}
100% {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
}

}

@-moz-keyframes niceIn{

0% {
    opacity: 1;
    -moz-transform: scale(1);
    transform: scale(1)
}
50% {
    opacity: 1;
    -moz-transform: scale(1.5);
    transform:scale(1.5)
}
70% {
    -o-transform: scale(.8);
    transform: scale(.8)
}
100% {
    opacity: 1;
    -moz-transform: scale(1);
    transform: scale(1)
}

}
.niceIn {

-webkit-animation:niceIn 0.8s .2s ease;
-moz-animation:niceIn 0.8s .2s ease;
-o-animation:niceIn 0.8s .2s ease;
animation:niceIn 0.8s .2s ease;

}
`

Answer 2

寫好動畫的樣式，完成點擊切換一下這個樣式的class就好了

Answer 3

點擊觸發動畫，動畫可以用css3的animation來實現