diff --git a/packages/loading/src/directive.js b/packages/loading/src/directive.js index 11943f29f..82448fad2 100644 --- a/packages/loading/src/directive.js +++ b/packages/loading/src/directive.js @@ -36,37 +36,40 @@ exports.install = Vue => { }); } else { if (el.domVisible) { - el.mask.style.display = 'none'; - el.domVisible = false; - - if (binding.modifiers.fullscreen && el.originalOverflow !== 'hidden') { - document.body.style.overflow = el.originalOverflow; - } - if (binding.modifiers.fullscreen || binding.modifiers.body) { - document.body.style.position = el.originalPosition; - } else { - el.style.position = el.originalPosition; - } + el.instance.$on('after-leave', _ => { + el.domVisible = false; + if (binding.modifiers.fullscreen && el.originalOverflow !== 'hidden') { + document.body.style.overflow = el.originalOverflow; + } + if (binding.modifiers.fullscreen || binding.modifiers.body) { + document.body.style.position = el.originalPosition; + } else { + el.style.position = el.originalPosition; + } + }); + el.instance.visible = false; } } }; - let insertDom = (parent, directive, binding) => { - if (!directive.domVisible) { - Object.keys(directive.maskStyle).forEach(property => { - directive.mask.style[property] = directive.maskStyle[property]; + let insertDom = (parent, el, binding) => { + if (!el.domVisible) { + Object.keys(el.maskStyle).forEach(property => { + el.mask.style[property] = el.maskStyle[property]; }); - if (directive.originalPosition !== 'absolute') { + if (el.originalPosition !== 'absolute') { parent.style.position = 'relative'; } if (binding.modifiers.fullscreen && binding.modifiers.lock) { parent.style.overflow = 'hidden'; } - directive.mask.style.display = 'block'; - directive.domVisible = true; + el.domVisible = true; - parent.appendChild(directive.mask); - directive.domInserted = true; + parent.appendChild(el.mask); + Vue.nextTick(() => { + el.instance.visible = true; + }); + el.domInserted = true; } }; @@ -79,6 +82,7 @@ exports.install = Vue => { fullscreen: !!binding.modifiers.fullscreen } }); + el.instance = mask; el.mask = mask.$el; el.maskStyle = {}; diff --git a/packages/loading/src/index.js b/packages/loading/src/index.js index 24c06032f..7841d0779 100644 --- a/packages/loading/src/index.js +++ b/packages/loading/src/index.js @@ -29,10 +29,13 @@ LoadingConstructor.prototype.close = function() { if (this.fullscreen) { fullscreenLoading = undefined; } - this.$el && - this.$el.parentNode && - this.$el.parentNode.removeChild(this.$el); - this.$destroy(); + this.$on('after-leave', _ => { + this.$el && + this.$el.parentNode && + this.$el.parentNode.removeChild(this.$el); + this.$destroy(); + }); + this.visible = false; }; const addStyle = (options, parent, instance) => { @@ -90,6 +93,9 @@ const Loading = (options = {}) => { parent.style.overflow = 'hidden'; } parent.appendChild(instance.$el); + Vue.nextTick(() => { + instance.visible = true; + }); if (options.fullscreen) { fullscreenLoading = instance; } diff --git a/packages/loading/src/loading.vue b/packages/loading/src/loading.vue index 30a295642..9b7696b48 100644 --- a/packages/loading/src/loading.vue +++ b/packages/loading/src/loading.vue @@ -1,12 +1,17 @@ \ No newline at end of file diff --git a/packages/theme-default/src/loading.css b/packages/theme-default/src/loading.css index 92a13ed31..d7b3900e8 100644 --- a/packages/theme-default/src/loading.css +++ b/packages/theme-default/src/loading.css @@ -11,6 +11,7 @@ right: 0; bottom: 0; left: 0; + transition: opacity 0.3s; @when fullscreen { position: fixed; @@ -54,6 +55,11 @@ } } +.el-loading-fade-enter, +.el-loading-fade-leave-active { + opacity: 0; +} + @keyframes loading-rotate { 100% { transform: rotate(360deg); diff --git a/test/unit/specs/loading.spec.js b/test/unit/specs/loading.spec.js index da434b5a0..ab71c65d6 100644 --- a/test/unit/specs/loading.spec.js +++ b/test/unit/specs/loading.spec.js @@ -7,8 +7,18 @@ describe('Loading', () => { let vm, loadingInstance, loadingInstance2; afterEach(() => { destroyVM(vm); - loadingInstance && loadingInstance.close(); - loadingInstance2 && loadingInstance2.close(); + if (loadingInstance) { + loadingInstance.close(); + loadingInstance.$el && + loadingInstance.$el.parentNode && + loadingInstance.$el.parentNode.removeChild(loadingInstance.$el); + } + if (loadingInstance2) { + loadingInstance2.close(); + loadingInstance2.$el && + loadingInstance2.$el.parentNode && + loadingInstance2.$el.parentNode.removeChild(loadingInstance2.$el); + } }); describe('as a directive', () => { @@ -171,7 +181,7 @@ describe('Loading', () => { it('close', () => { loadingInstance = Loading(); loadingInstance.close(); - expect(document.querySelector('.el-loading-mask')).to.not.exist; + expect(loadingInstance.visible).to.false; }); it('target', () => { @@ -216,11 +226,13 @@ describe('Loading', () => { let masks = document.querySelectorAll('.el-loading-mask'); expect(masks.length).to.equal(1); loadingInstance2.close(); - masks = document.querySelectorAll('.el-loading-mask'); - expect(masks.length).to.equal(0); - done(); - }, 100); - }, 100); + setTimeout(() => { + masks = document.querySelectorAll('.el-loading-mask'); + expect(masks.length).to.equal(0); + done(); + }, 350); + }, 10); + }, 10); }); it('lock', () => {