diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js index c68bfa48c..588bf8f5e 100644 --- a/src/collapse-item/index.js +++ b/src/collapse-item/index.js @@ -60,15 +60,19 @@ export default createComponent({ this.inited = true; } - raf(() => { + // Use raf: flick when opened in safari + // Use nextTick: closing animation failed when set `user-select: none` + const nextTick = expanded ? this.$nextTick : raf; + + nextTick(() => { const { content, wrapper } = this.$refs; if (!content || !wrapper) { return; } - const { clientHeight } = content; - if (clientHeight) { - const contentHeight = `${clientHeight}px`; + const { offsetHeight } = content; + if (offsetHeight) { + const contentHeight = `${offsetHeight}px`; wrapper.style.height = expanded ? 0 : contentHeight; raf(() => { wrapper.style.height = expanded ? contentHeight : 0; @@ -96,7 +100,7 @@ export default createComponent({ if (!this.expanded) { this.show = false; } else { - this.$refs.wrapper.style.height = null; + this.$refs.wrapper.style.height = ''; } } }, diff --git a/src/collapse/test/index.spec.js b/src/collapse/test/index.spec.js index 91ff06488..d1cf8524b 100644 --- a/src/collapse/test/index.spec.js +++ b/src/collapse/test/index.spec.js @@ -127,8 +127,6 @@ test('lazy render collapse content', async () => { const titles = wrapper.findAll('.van-collapse-item__title'); titles.at(1).trigger('click'); - await later(50); - wrapper.vm.content = 'content'; expect(wrapper).toMatchSnapshot(); });