layui官方文档晦涩难懂，对小白特别不友好
为演示效果，js和css文件引用cdn
演示是ul套li标签进行演示，这不是固定的，你也可以div套div，div套span，外面和里面的标签类要一一对应就行
官方文档演示没有提js语句的使用，直接写html代码是没有动画效果的，所以需要使用layui的js语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layui动画测试</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"> <script src="https://www.layuicdn.com/layui/layui.js"></script> <style> .site-doc-icon li .layui-anim { width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%; } </style> </head> <body> <ul class="site-doc-icon site-doc-anim"> <li> <div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div> </li> <li> <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div> </li> <li> <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div> </li> <li> <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div> </li> </ul> <ul class="site-doc-icon site-doc-anim"> <li> <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div> </li> <li> <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div> </li> <li> <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div> </li> <li> <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div> </li> </ul> <script> layui.use([], function () { var $ = layui.jquery; //演示动画开始 $('.site-doc-icon .layui-anim').on('click', function(){ var othis = $(this), anim = othis.data('anim'); //停止循环 if(othis.hasClass('layui-anim-loop')){ return othis.removeClass(anim); } othis.removeClass(anim); setTimeout(function(){ othis.addClass(anim); }); //恢复渐隐 if(anim === 'layui-anim-fadeout'){ setTimeout(function(){ othis.removeClass(anim); }, 1300); } }); //演示动画结束 }) </script> </body> </html>