layui官方文档晦涩难懂，对小白特别不友好
为演示效果，js和css文件引用cdn
演示是ul套li标签进行演示，这不是固定的，你也可以div套div，div套span，外面和里面的标签类要一一对应就行
官方文档演示没有提js语句的使用，直接写html代码是没有动画效果的歧路亡羊什么意思，所以需要使用layui的js语句
<!doctype html><html lang="en"><head> <meta chart="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; bor助学金是一年一次还是一学期一次der-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.u([], function () { 但丁的代表作 var $ = layui.jquery; //演示动画开始 $('.site-doc-icon .layui-anim').on('click', function(){ var othis = $(this), anim = othi单机游戏怎么联机s.data('anim'); //停止循环 if(othis.hasclass('layui-anim-loop')){ return othis.removeclass(anim); } othis.removeclass(anim); ttimeout(function(){ othis.addclass(anim); }); //恢复渐隐 if(anim === 'layui-anim-fadeout'){ ttimeout(fun雪白反义词ction(){ othis.removeclass(anim); }, 1300); } }); //演示动画结束 })</script></body></html>
本文发布于:2023-04-03 17:12:25，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/c2a9a6bacf93da9a41db0b017b1218c8.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：layui 动画 实现过程.doc
本文 PDF 下载地址：layui 动画 实现过程.pdf
| 留言与评论（共有 0 条评论） |
