fastadmin自定义弹框动画

修改fast.js文件,修改open方法

skin: 'msgbox-fade-enter-active',
anim:-1,

$(layero).removeClass("msgbox-fade-enter-active");

.msgbox-fade-enter-active {
    -webkit-animation: msgbox-fade-in .3s;
    animation: msgbox-fade-in .3s
}

.msgbox-fade-leave-active {
    -webkit-animation: msgbox-fade-out .3s;
    animation: msgbox-fade-out .3s
}
.layer-anim-close{
    -webkit-animation: msgbox-fade-out .3s!important;
    animation: msgbox-fade-out .3s!important
}
@-webkit-keyframes msgbox-fade-in {
    0% {
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes msgbox-fade-in {
    0% {
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@-webkit-keyframes msgbox-fade-out {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0);
        opacity: 0
    }
}

@keyframes msgbox-fade-out {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0);
        opacity: 0
    }
}

修改了layer的关闭动画样式layer-anim-close和添加msgbox-fade-enter-active

完整代码:

//打开一个弹出窗口
            open: function (url, title, options) {
                title = options && options.title ? options.title : (title ? title : "");
                url = Fast.api.fixurl(url);
                url = url + (url.indexOf("?") > -1 ? "&" : "?") + "dialog=1";
                // var area = Fast.config.openArea != undefined ? Fast.config.openArea : [$(window).width() > 800 ? '800px' : '95%', $(window).height() > 600 ? '600px' : '95%'];
               
                 var area = Fast.config.openArea != undefined ? Fast.config.openArea : [$(window).width() > 800 ? '490px' : '80%', $(window).height() > 600 ? '600px' : '95%'];
                var success = options && typeof options.success === 'function' ? options.success : $.noop;
                if (options && typeof options.success === 'function') {
                    delete options.success;
                }
                
                options = $.extend({
                    type: 2,
                    title: title,
                    shadeClose: false,
                    shade: true,
                    maxmin: true,
                    moveOut: true,
                    area: area,
                    // offset: 'rb',
                    skin: 'msgbox-fade-enter-active',
                    anim:-1,
                    content: url,
                    // btnAlign:'r',
                    zIndex: parent.Layer.zIndex,
                    // scrollbar:false,
                    success: function (layero, index) {
                        //  // 关闭弹窗
                        //     layer.close(index);
                        //     // 显示加载层
                        //     var loadIndex = layer.load(5, {
                        //         shade: [0.5, '#fff'],
                        //         zIndex: layer.zIndex
                        //     });
                        //     // 在顶层显示加载层
                        //     layer.setTop(layero);
                        //  layero.addClass('msgbox-fade-enter-active');
                        var that = this;
                        //存储callback事件
                        parent.$(layero).data("callback", that.callback);
                        
                        $(layero).removeClass("msgbox-fade-enter-active");
                        // Layer.setTop(layero);
                        try {
                            var frame = parent.Layer.getChildFrame('html', index);
                //             console.log(frame.find('.form-horizontal').height()+40)
                //              parent.layer.style(index, {
                // 				// height: frame.find('.form-horizontal').height()+150
                // 				background: 'red'
                // 			});
                			$.fn.changeFrameHeight = function (height) {
                    			console.log(12313)
                    		}
                            var layerfooter = frame.find(".layer-footer");
                            Fast.api.layerfooter(layero, index, that);

                            //绑定事件
                            if (layerfooter.length > 0) {
                                // 监听窗口内的元素及属性变化
                                // Firefox和Chrome早期版本中带有前缀
                                var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
                                if (MutationObserver) {
                                    // 选择目标节点
                                    var target = layerfooter[0];
                                    // 创建观察者对象
                                    var observer = new MutationObserver(function (mutations) {
                                        Fast.api.layerfooter(layero, index, that);
                                        mutations.forEach(function (mutation) {
                                        });
                                    });
                                    // 配置观察选项:
                                    var config = {attributes: true, childList: true, characterData: true, subtree: true}
                                    // 传入目标节点和观察选项
                                    observer.observe(target, config);
                                    // 随后,你还可以停止观察
                                    // observer.disconnect();
                                }
                            }
                        } catch (e) {

                        }
                        if ($(layero).height() > $(window).height()) {
                            //当弹出窗口大于浏览器可视高度时,重定位
                            Layer.style(index, {
                                top: 0,
                                height: $(window).height()
                            });
                        }
                        success.call(this, layero, index);
                    },
                }, options ? options : {});
                if ($(window).width() < 480 || (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && top.$(".tab-pane.active").length > 0)) {
                    if (top.$(".tab-pane.active").length > 0) {
                        options.area = [top.$(".tab-pane.active").width() + "px", top.$(".tab-pane.active").height() + "px"];
                        options.offset = [top.$(".tab-pane.active").scrollTop() + "px", "0px"];
                    } else {
                        options.area = [$(window).width() + "px", $(window).height() + "px"];
                        options.offset = ["0px", "0px"];
                    }
                }
               
                return parent.Layer.open(options);
            }