layui组件添加动画并控制layui-anim动画的显示速度

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;}