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

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

View File

@ -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 = '';
}
}
},

View File

@ -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();
});