javascript - Wie implementiert man die Like-Funktion von Mobile QQ?

Question

Wie erreicht man die Animation von Zahlen, die nach Likes fliegen?

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来实现