layui给组件添加动画非常简单,只需要给对应的组件加上class即可:layui-anim layui-anim-scaleSpring
layui-anim必须要给,后面那个是具体动画的效果,layui提供了11种动画效果和1个循环动画的类.
具体效果可看:Layui CSS3动画类
if (d.待派单 > 0) {
$("#dpd_tips").addClass("layui-anim layui-anim-scaleSpring");
$("#dpd_img").addClass("layui-anim layui-anim-scale layui-anim-loop");
}
添加动画,尤其是加了 layui-anim-loop后,可以发现动画速度比较快,看着不舒服,感觉动画速度慢点应该效果更好,解决方法如下:
加一个在页面加重写一下layui-anim样式,指定animotion的速度即可:
.layui-anim{animation-duration: 1s; -webkit-animation-duration: 1s;}