1、动画
在实用价值的前提之下，layui并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。但是layui的动画使用起来并不是特别方便，本文添加了一些css原生动画。
2、使用方式
动画的使用非常简单，直接对元素赋值动画特定的 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>
内置css动画一览：
内置css动画一览.png
示例代码：
<div class="layui-anim layui-anim-up " style="height: 100px;width: 100px;background-color: #00F7DE;">
从最底部往上滑入
</div>
<div class="layui-anim layui-anim-fadein "style="height: 100px;width: 100px;background-color: #00F7DE;margin-top: 30px;">
渐现
</div>
<div class="layui-anim layui-anim-upbit "style="height: 100px;width: 100px;background-color: #00F7DE;margin-top: 30px;">
微微往上滑入
</div>
<div class="layui-anim layui-anim-scale "style="height: 100px;width: 100px;background-color: #00F7DE;margin-top: 30px;">
微微往上滑入
</div>
效果图.png
3、补充属性
上面加的动画,在页面一加载的时候就播放了，并且播放的时间也没有给出修改方法，翻看了源码（layui.css）找到了相关属性，对他们重新赋值即可。下面以layui-anim-up 动画为例，修改动画的播放时间。
.layui-anim {
-webkit-animation-duration:.3s; /* Safari 和 Chrome的设置动画持续时间方法 */
animation-duration: .3s; /*IE10、Firefox 以及 Opera的设置动画持续时间方法 */
-webkit-animation-fill-mode: both; /*规定对象动画时间之外的状态为向前和向后填充模式都被应用。*/
animation-fill-mode: both
}
.layui-anim-up {
-webkit-animation-name: layui-up;
animation-name: layui-up
}
/*下面有两个动画规定方式,是针对于不同浏览器的,Chrome 和 Safari 需要前缀 -webkit-。*/
@-webkit-keyframes layui-upbit {
from { /*动画开始时属性值*/
-webkit-transform: translate3d(0, 30px, 0); /*动画开始时位置*/
opacity: .3 /*不透明度*/
}
to { /*动画结束时属性值*/
-webkit-transform: translate3d(0, 0, 0); /*动画结束时位置*/
opacity: 1
}
}
/*Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。*/
@keyframes layui-upbit {
from {
transform: translate3d(0, 30px, 0);
opacity: .3
}
to {
transform: translate3d(0, 0, 0);
opacity: 1
}
}
注：
- 观察上述源码后，发现无论是规定动画还是动画属性名称都有两种写法，这是为了适应不同的浏览器，Internet Explorer 10、Firefox 以及 Opera 对应着@keyframes 规则和 animation 属性,而Chrome 和 Safari 需要前缀 -webkit-（@-webkit-keyframes、-webkit-animation-duration等）
- 在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称;
规定动画的时长
这是原生css动画的规定方式，layui已经将这些做完了，我们直接用即可，也可按需修改。@keyframes 规则和所有动画属性（Chrome 和 Safari 加上前缀 -webkit-即可）
动画属性.png
4、改进动画
在修改动画持续时间前，需要了解一下当样式表的来源不同时，样式的相应优先级顺序：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
<div style=""></div> <!--内联样式-->
<style ></style> <!-- 内部样式-->
<link rel="stylesheet" type="text/css" href=""/> <!--外部样式-->
上面的例子样式是引入的外部css文件，但我们轻易不要对源码修改，所以我们只需要在div上面添加内联样式或者内部样式，这里以内部样式为例，将layui-anim-up的持续时间改为5秒，即添加-webkit-animation-duration:5s;animation-duration: 5s;即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<style type="text/css">
#div1{
-webkit-animation-duration:5s;
animation-duration: 5s;
}
</style>
</head>
<body>
<div class="layui-anim layui-anim-up "id="div1" style="height: 100px;width: 100px;background-color: #00F7DE;">
从最底部往上滑入
</div>
</body>
</html>
5、css原生动画
太困了，以后有机会写叭，反正也没人看。
网友评论