blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[bugfix] Collapse: flick in safari (#3686)

Browse Source
This commit is contained in:
neverland 2019-06-28 20:20:52 +08:00 committed by GitHub
parent e08bea7577
commit fe87885d90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/collapse-item/index.js
View File

@ -60,15 +60,19 @@ export default createComponent({
this.inited = true; 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; const { content, wrapper } = this.$refs;
if (!content || !wrapper) { if (!content || !wrapper) {
return; return;
} }
const { clientHeight } = content; const { offsetHeight } = content;
if (clientHeight) { if (offsetHeight) {
const contentHeight = `${clientHeight}px`; const contentHeight = `${offsetHeight}px`;
wrapper.style.height = expanded ? 0 : contentHeight; wrapper.style.height = expanded ? 0 : contentHeight;
raf(() => { raf(() => {
wrapper.style.height = expanded ? contentHeight : 0; wrapper.style.height = expanded ? contentHeight : 0;
@ -96,7 +100,7 @@ export default createComponent({
if (!this.expanded) { if (!this.expanded) {
this.show = false; this.show = false;
} else { } else {
this.$refs.wrapper.style.height = null; this.$refs.wrapper.style.height = '';
} }
} }
}, },

2
src/collapse/test/index.spec.js
View File

@ -127,8 +127,6 @@ test('lazy render collapse content', async () => {
const titles = wrapper.findAll('.van-collapse-item__title'); const titles = wrapper.findAll('.van-collapse-item__title');
titles.at(1).trigger('click'); titles.at(1).trigger('click');
await later(50);
wrapper.vm.content = 'content'; wrapper.vm.content = 'content';
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });