您好,登錄后才能下訂單哦!
小編給大家分享一下layer如何打開/關(guān)閉動畫,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
1. 打開窗口時,支持自定義或者第三方動畫
打開layer.js,定位到函數(shù):Class.pt.creat ,
找到代碼:
//為兼容jQuery3.0的css動畫影響元素尺寸計算 if (doms.anim[config.anim]) { var animClass = 'layer-anim ' + doms.anim[config.anim]; that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { $(this).removeClass(animClass); }); }
修改為(此處只是針對css動畫庫animate):
//為兼容jQuery3.0的css動畫影響元素尺寸計算 if (doms.anim[config.anim]) { var animClass = 'layer-anim ' + doms.anim[config.anim]; that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { $(this).removeClass(animClass); }); } else { //支持自定義的,或者第三方彈出動畫 var animClass = config.anim; var animated = 'animated'; that.layero.addClass(animated); that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { $(this).removeClass(animClass); $(this).removeClass(animated); }); }
至此,layer便可支持其他彈出動畫。
2.關(guān)閉窗口時,支持自定義或者第三方動畫(layer.open時需傳入新增參數(shù):closeAnim)
打開layer.js
定位到函數(shù):Class.pt.config
新增參數(shù):
closeAnim: 'layer-anim-close',
定位到函數(shù):Class.pt.creat
找到代碼:
//記錄關(guān)閉動畫 if (config.isOutAnim) { that.layero.data('isOutAnim', true); }
修改為:
//記錄關(guān)閉動畫 if (config.isOutAnim) { that.layero.data('isOutAnim', true); that.layero.data('closeAnim', config.closeAnim); }
定位函數(shù)到:layer.close
找到代碼:
if (layero.data('isOutAnim')) { layero.addClass('layer-anim ' + closeAnim); } $('#layui-layer-moves, #layui-layer-shade' + index).remove(); layer.ie == 6 && ready.reselect(); ready.rescollbar(index); if (layero.attr('minLeft')) { ready.minIndex--; ready.minLeft.push(layero.attr('minLeft')); } if ((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')) { remove() } else { setTimeout(function () { remove(); }, 200); }
修改為:
if (layero.data('isOutAnim')) { if (layero.data("closeAnim") === closeAnim) { layero.addClass('layer-anim ' + closeAnim); } else { layero.addClass(layero.data("closeAnim") + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { $('#layui-layer-moves, #layui-layer-shade' + index).remove(); remove(); }); } } if (layero.data("closeAnim") === closeAnim) { $('#layui-layer-moves, #layui-layer-shade' + index).remove(); layer.ie == 6 && ready.reselect(); ready.rescollbar(index); if (layero.attr('minLeft')) { ready.minIndex--; ready.minLeft.push(layero.attr('minLeft')); } if ((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')) { remove() } else { setTimeout(function () { remove(); }, 200); } }
以上是“l(fā)ayer如何打開/關(guān)閉動畫”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。