介绍 layui.define((& # 39;层# 39;],,函数(出口){
,,,var layer =, layui.layer;
,,,var obj =, {
,,,,,,,rightPopupLayer:, function (内容=& # 39;& # 39;),{
,,,,,,,,,,,layer.open ({
,,,,,,,,,,,,,,,类型:,1,
,,,,,,,,,,,,,,,标题:,& # 39;& # 39;
,,,,,,,,,,,,,,,抵消:,(& # 39;10 px # 39;,, & # 39; & # 39; 100%),
,,,,,,,,,,,,,,,皮肤:,& # 39;layui-anim layui-anim-rl layui-layer-adminRight& # 39;
,,,,,,,,,,,,,,,closeBtn:, 0,
,,,,,,,,,,,,,,,内容:,内容,
,,,,,,,,,,,,,,,shadeClose:,真的,
,,,,,,,,,,,,,,,面积:,(& # 39;16% & # 39;,& # 39;& # 39;95%)
,,,,,,,,,,,})
,,,,,,,,,,,let op_width =,美元(& # 39;.layui-anim-rl& # 39;) .outerWidth ();
,,,,,,,,,,,美元(& # 39;.layui-layer-shade& # 39;) .off(& # 39;点击# 39;)。(& # 39;点击# 39;,,function (), {
,,,,,,,,,,,,,,,美元(& # 39;.layui-anim-rl& # 39;) .animate({左:& # 39;+=& # 39;+ op_width + & # 39; px # 39;},, 300,, & # 39;线性# 39;,,function (), {
,,,,,,,,,,,,,,,,,,,美元(& # 39;.layui-anim-rl& # 39;) .remove ()
,,,,,,,,,,,,,,,,,,,美元(& # 39;.layui-layer-shade& # 39;) .remove ()
,,,,,,,,,,,,,,,})
,,,,,,,,,,,})
,,,,,,,}
,,,};
,,,出口(& # 39;rightPopup& # 39;,, obj);
}); @keyframes layui-rl {
,,,从{变换:translateX (0 px);},{变换:translateX (-100%);}
}
@-webkit-keyframes layui-rl {
,,,从{变换:translateX (0 px);},{变换:translateX (-100%);}
}
.layui-anim {
,,,-webkit-animation-duration:,。3;
,,,动画:,。3;
,,,-webkit-animation-fill-mode:,两个;
,,,animation-fill-mode:,两个;
}
.layui-anim-rl {
,,,-webkit-animation-name:, layui-rl;
,,,animation-name:, layui-rl;
}
.layui-layer-adminRight {
,,,不必:,1 px 1 px 10 px rgba (0, 0, 0, 1。);
,,,这个特性:,0;
,,,溢出:,汽车;
}
这篇文章主要介绍了layui自定义滑动弹窗动画的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
导语:
我们知道layui的层模块中的动画参数是可以设置弹窗动画效果的,但是这种弹窗动画种类很少。现在项目中要实现一个从右侧弹出的弹窗效果,因此参考官方模板layuiAdmin后自己封装了一个滑动弹窗,现在分享给大家。
1. layui封装自定义组件
在layui的js文件夹下创建新的文件夹layui_exts,并在文件夹下创建自定义的js文件rightPopup。js,如下图:
js文件写入代码,代码如下(示例):
2。在全局js中设置layui导入自定义组件入口
3。设置自定义组件的样式
在自定义组件的层中的皮肤属性里加入对应选择器名称后,层的弹框就会自动将皮肤参数作为类属性值。
4。最后
按照layui使用其他模块的方式使用自定义模块即可。
感谢你能够认真阅读完这篇文章,希望小编分享的“layui自定义滑动弹窗动画的方法”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
