基本
- 引入js和css文件
代码
<!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> -->
<!-- 可以使用各种标签嵌套 但是必须使用标签嵌套 否则不生效 还要注意 class 和 data-anim 必须要写 -->
<div class="site-doc-icon site-doc-anim">
<div class="layui-anim" data-anim="layui-anim-up" >asd<br/>asd</div>
</div>
<script>
layui.use('jquery', function () {
var $ = layui.jquery;
//演示动画开始
//可以在这里修改触发动画的事件
$('.site-doc-icon .layui-anim').on('mouseover', 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>
tips:
- 必须标签嵌套标签
- class和自定的属性不能少写
点击按钮触发动画
<!-- 可以使用各种标签嵌套 但是必须使用标签嵌套 否则不生效 还要注意 class 和 data-anim 必须要写 -->
<div class="site-doc-icon site-doc-anim">
<div class="layui-anim" data-anim="layui-anim-up layui-anim-loop" >asd<br/>asd</div>
</div>
<div>
<button onclick="test()">测试</button>
</div>
<script>
<!--点击其他按钮 开始动画 -->
function test(){
var demo=$('.site-doc-icon .layui-anim')
var othis = demo, 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>