需求
项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。
实现过程
书写css
使用css的keyframe属性,配合animation。
@keyframes ringing
{
from {transform:rotate(-30deg);}
to {transform:rotate(30deg);}
}
.xxAnimation{
animation: ringing 0.3s linear 0s 5 alternate;
}
js配合
我们实现的效果应该是一进来的时候 晃两下,数据更新之后晃两下。js如下:
if(data != 0){
$("#messageMv").addClass("xxAnimation");
setTimeout(function () {
$("#messageMv").removeClass("xxAnimation");
},1500)
}
设置定时器的目的是让下次还能继续晃动,如果不拿掉,下次就不会晃动了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。