layui 动画 实现过程
程序员文章站
2022-03-20 16:42:03
layui官方文档晦涩难懂，对小白特别不友好 为演示效果，js和css文件引用cdn 演示是ul套li标签进行演示，这不是固定的，你也可以div套div，div套span，外面和里面的标签类要一一对应就行 官方文档演示没有提js语句的使用，直接写html代码是没有动画效果的，所以需要使用layui的 ......
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>
上一篇： [插件化开发] 1. 初识OSGI