Layui 맞춤형 슬라이딩 팝업 애니메이션-레이이 튜토리얼-php.cn

Layui 맞춤형 슬라이딩 팝업 애니메이션

王林

풀어 주다： 2021-01-01 11:46:22

앞으로

4697명이 탐색했습니다.

Layui 맞춤형 슬라이딩 팝업 애니메이션

소개:

(동영상 공유 학습: 프로그래밍 영상)

layui의 레이어 모듈에 있는 anim 매개변수가 팝업 애니메이션 효과를 설정할 수 있는 것으로 알고 있지만 팝-업 유형은 거의 없습니다. 업 애니메이션. 이제 프로젝트에서는 오른쪽에서 팝업되는 팝업창 효과를 구현해야 합니다. 따라서 공식 템플릿인layuiAdmin을 참고하여 슬라이딩 팝업창을 캡슐화하여 모두와 공유하도록 하겠습니다.

Layui 맞춤형 슬라이딩 팝업 애니메이션

1.layui는 커스텀 컴포넌트를 캡슐화합니다

layui의 js 폴더 아래에 새로운 폴더layui_exts를 생성하고, 그 폴더 아래에 아래와 같이 커스텀 js 파일 rightPopup.js를 생성합니다.

Layui 맞춤형 슬라이딩 팝업 애니메이션

코드 작성 js 파일에 코드는 다음과 같습니다. 사용자 정의 구성 요소 해당 선택기 이름을 스킨 속성에 추가하면 레이어의 팝업 상자가 자동으로 스킨 매개 변수를 클래스 속성 값으로 사용합니다.

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

로그인 후 복사

4. 마지막으로

layui가 다른 모듈을 사용하는 방식으로 사용자 정의 모듈을 사용하세요. Layui 맞춤형 슬라이딩 팝업 애니메이션