layui custom sliding pop-up animation-Layui Tutorial-php.cn

layui custom sliding pop-up animation

王林

Release： 2021-01-01 11:46:22

forward

4696 people have browsed it

layui custom sliding pop-up animation

Introduction:

(Learning video sharing: Programming video)

We know the anim parameters in the layer module of layui It is possible to set pop-up animation effects, but there are very few types of such pop-up animations. Now in the project, we need to implement a pop-up window effect that pops up from the right side. Therefore, we encapsulated a sliding pop-up window by referring to the official template layuiAdmin and now share it with everyone.

layui custom sliding pop-up animation

1.layui encapsulates custom components

Create a new folder layui_exts under the js folder of layui, and create a custom component under the folder js file rightPopup.js, as shown below:

layui custom sliding pop-up animation

#js file writes code, the code is as follows (example):

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

            })
        }
    };
    exports(&#39;rightPopup&#39;, obj);
});

Copy after login

2. In global js Set the entrance of layui to import custom components

layui custom sliding pop-up animation

3. Set the style of the custom component

Add the corresponding selection to the skin attribute in the layer of the custom component After adding the device name, the layer's pop-up box will automatically use the skin parameter as the class attribute value.

@keyframes layui-rl{
    from{transform:translateX(0px);}to{transform:translateX(-100%);}
}

@-webkit-keyframes layui-rl{
    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;
}

Copy after login

4. Finally

Just use the custom module the way layui uses other modules.

layui custom sliding pop-up animation

Related recommendations: layui tutorial

The above is the detailed content of layui custom sliding pop-up animation. For more information, please follow other related articles on the PHP Chinese website!