animation pop-up coulissante personnalisée layui-Tutoriel Layui-php.cn

animation pop-up coulissante personnalisée layui

王林

Libérer： 2021-01-01 11:46:22

avant

4698 Les gens l'ont consulté

animation pop-up coulissante personnalisée layui

Introduction :

(Partage de vidéos d'apprentissage : Vidéo de programmation)

Nous connaissons les paramètres d'animation dans le module de couche de layui Il est possible de définir des effets d'animation pop-up, mais il existe très peu de types de telles animations pop-up. Maintenant, dans le projet, nous devons implémenter un effet de fenêtre contextuelle qui apparaît du côté droit. Par conséquent, nous avons encapsulé une fenêtre contextuelle coulissante en nous référant au modèle officiel layuiAdmin et la partageons maintenant avec tout le monde.

animation pop-up coulissante personnalisée layui

1.layui encapsule des composants personnalisés

Créez un nouveau dossier layui_exts sous le dossier js de layui et créez un composant personnalisé sous le dossier js file rightPopup .js, comme indiqué ci-dessous :

animation pop-up coulissante personnalisée layui

code d'écriture du fichier js, le code est le suivant (exemple) :

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);
});

Copier après la connexion

2 Dans global js Définissez le. entrée de layui pour importer des composants personnalisés

animation pop-up coulissante personnalisée layui

3. Définissez le style du composant personnalisé

Ajoutez la sélection correspondante à l'attribut skin dans le calque du composant personnalisé Après avoir ajouté le nom du périphérique, la boîte de dialogue du calque utilisera automatiquement le paramètre skin comme valeur d'attribut de classe.

@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;
}

Copier après la connexion

4. Enfin

Utilisez simplement le module personnalisé de la même manière que layui utilise les autres modules.

animation pop-up coulissante personnalisée layui