導讀:建站文章建站文章我們知道layuilayer模塊中的anim參數可以設置彈出窗口動畫效果，但這種彈出">

我們知道layuilayer模塊中的anim參數可以設置彈出窗口動畫效果，但這種彈出窗口動畫類型很少。現在項目中需要從右側彈出彈出窗口效果，所以參考官方模板layuiadmin后，我們自己封裝了一個滑動彈出窗口，現在就和大家分享一下。

1.layui包裝自定義組件

在layui的js文件夾下創建新的文件夾layui_exts，并在文件夾下創建自定義的js文件rightpopup.js，如下網站建設圖：

js文件寫入代碼，代碼如下(示例)：

layui.define(['layer'], function(exports){ var layer = layui.layer; var obj = { rightPopupLayer: function (content='') { layer.open({ type: 1, title: '', offset: ['10px', '100%'], skin: 'layui-anim layui-anim-rl layui-layer-adminRight', closeBtn: 0, content: content, shadeClose: true, area: ['16%', '95%'] }) let op_width = $('.layui-anim-rl').outerWidth(); $('.layui-layer-shade').off('click').on('click', function () { $('.layui-anim-rl').animate({left:'+='+op_width+'px'}, 300, 'linear', function () { $('.layui-anim-rl').remove() $('.layui-layer-shade').remove() }) }) } }; exports('rightPopup', obj); });

2.在全局js中設置layui導入自定義組件入口

3.設置自定義組件的樣式

將相應的選擇器名稱添加到自定義組件的layer中的skin屬性中后，layer的彈框將自動將skin參數作為class屬性值。

@keyframes layui-rl{ from{transform:translateX(0px);}to{transform:t網站seo優化軟件ranslateX(-100%);} } @-webkit-keyframes layui-rl{seo網站排名優化軟件 from{transform:translateX(0px);}to{transform:translateX(-100%);} } .layui-anim { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .layui-anim-rl { -webkit-animation-name: layui-rl; animation-name: layui-rl; } .layui-layer-adminRight { box-shadow: 1px 1px 10px rgba(0,0,0,.1); border-radius: 0; overflow: auto; }

4.最后

自定義模塊可以通過layui使用其他模塊來使用。

layui教程

以上是layui自定義滑動彈窗動畫的詳細內容，請關注861模板網的其他相關文章！

關鍵詞標簽: 建站 自定義 動畫