1. 在实用价值的前提之下, layui并没有内置过多花俏的动画。而他们同样在layui的许多交互元素中, 发挥着重要的作用。layui的动画全部采用CSS3。
2. 使用方式
2.1. 动画的使用非常简单, 直接对元素赋值动画特定的class类名即可。如:
// 其中layui-anim是必须的, 后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>
// 循环动画, 追加: layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>
3. 内置CSS3动画一览表
3.1. 下面是不同的动画类名:
4. 例子
4.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3动画类</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<style>
.site-doc-icon { width: 892px; font-size: 0; }
.site-doc-icon li {
display: inline-block;
vertical-align: middle;
width: 222px;
height: auto;
line-height: 25px;
padding: 20px 0;
margin-right: -1px;
margin-bottom: -1px;
border: 1px solid #e2e2e2;
font-size: 14px;
text-align: center;
color: #666;
transition: all 0.3s;
}
.site-doc-icon li:hover { background-color: #f2f2f2; color: #000; }
.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>
<div>layui-anim-up</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
<div>layui-anim-upbit</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
<div>layui-anim-scale</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
<div>layui-anim-scaleSpring</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
<div>layui-anim-fadein</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
<div>layui-anim-fadeout</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
<div>layui-anim-rotate</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
<div>追加:layui-anim-loop</div>
</li>
</ul>
<script type="text/javascript">
layui.use('jquery', function(){
var $ = layui.$;
// 演示动画
$('.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>
4.2. 效果图