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

chenjiahan · web-flow · commit fe87885d90a3 · 2019-06-28T20:20:52.000+08:00
diff --git 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
@@ -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();
 });
