fix(ActionSheet): 页面跳转返回后再点击不显示问题 (#3796)

* fix: 页面跳转返回后再点击不显示问题

#3567

* test: 修复transition单测报错

* fix: fix(ActionSheet): 优化代码

Author: Boomkaa

src/mixins/transition.ts

@@ -57,7 +57,7 @@ export default function transition() {
         return [Number(durations), Number(durations)];
       },
       enter() {
-        const { name } = this.data;
+        const { name, transitionDurations } = this.data;
         const [duration] = this.durations;
         this.status = 'entering';
         this.setData({
@@ -71,6 +71,11 @@ export default function transition() {
         }, 30);
         if (typeof duration === 'number' && duration > 0) {
           this.transitionT = setTimeout(this.entered.bind(this), duration + 30);
+        } else {
+          this.transitionT = setTimeout(
+            this.status === 'entering' ? this.entered.bind(this) : null,
+            transitionDurations + 30,
+          );
         }
       },
       entered() {
@@ -82,7 +87,7 @@ export default function transition() {
         });
       },
       leave() {
-        const { name } = this.data;
+        const { name, transitionDurations } = this.data;
         const [, duration] = this.durations;
         this.status = 'leaving';
         this.setData({
@@ -97,6 +102,11 @@ export default function transition() {
         if (typeof duration === 'number' && duration > 0) {
           this.customDuration = true;
           this.transitionT = setTimeout(this.leaved.bind(this), duration + 30);
+        } else {
+          this.transitionT = setTimeout(
+            this.status === 'leaving' ? this.leaved.bind(this) : null,
+            transitionDurations + 30,
+          );
         }
       },
       leaved() {
@@ -106,6 +116,7 @@ export default function transition() {
         this.status = 'leaved';
         this.setData({
           transitionClass: '',
+          realVisible: false,
         });
       },
       onTransitionEnd() {
@@ -118,9 +129,6 @@ export default function transition() {
           this.entered();
         } else if (this.status === 'leaving' && !this.data.visible) {
           this.leaved();
-          this.setData({
-            realVisible: false,
-          });
         }
       },
     },

src/transition/__test__/index.test.js

@@ -41,44 +41,46 @@ describe('transition', () => {
       const [transitionDom] = transitionComp.dom.children;
 
       // enter
-      transitionComp.setData({ visible: true });
-      expect(transitionDom.style.display).toEqual('');
-      expect(transitionDom.className.match(/fade-enter\s/)).toBeTruthy();
-      expect(transitionDom.className.match(/fade-enter-active/)).toBeTruthy();
-
-      // enter to
-      jest.runAllTimers();
-      expect(transitionDom.className.match(/fade-enter-to/)).toBeTruthy();
-
-      // enter finished
-      transitionComp.instance.onTransitionEnd();
-      expect(transitionDom.className.match(/fade-(enter|enter-to|enter-active)/)).toBeFalsy();
-
-      // leave
-      transitionComp.setData({ visible: false });
-      expect(transitionDom.className.match(/leave\s/)).toBeTruthy();
-      expect(transitionDom.className.match(/leave-active/)).toBeTruthy();
-
-      // leave to
-      jest.runAllTimers();
-      expect(transitionDom.className.match(/leave-to/)).toBeTruthy();
-
-      // leave finished
-      transitionComp.instance.onTransitionEnd();
-      expect(transitionDom.style.display).toEqual('none');
-      expect(transitionDom.className.match(/(leave|leave-to|leave-active)/)).toBeFalsy();
+      transitionComp.setData({ visible: true }, () => {
+        expect(transitionDom.style.display).toEqual('');
+        expect(transitionDom.className.match(/fade-enter\s/)).toBeTruthy();
+        expect(transitionDom.className.match(/fade-enter-active/)).toBeTruthy();
+
+        // enter to
+        jest.runAllTimers();
+        expect(transitionDom.className.match(/fade-enter-to/)).toBeTruthy();
+
+        // enter finished
+        transitionComp.instance.onTransitionEnd();
+        expect(transitionDom.className.match(/fade-(enter|enter-to|enter-active)/)).toBeFalsy();
+
+        // leave
+        transitionComp.setData({ visible: false });
+        expect(transitionDom.className.match(/leave\s/)).toBeTruthy();
+        expect(transitionDom.className.match(/leave-active/)).toBeTruthy();
+
+        // leave to
+        jest.runAllTimers();
+        expect(transitionDom.className.match(/leave-to/)).toBeTruthy();
+
+        // leave finished
+        transitionComp.instance.onTransitionEnd();
+        expect(transitionDom.style.display).toEqual('none');
+        expect(transitionDom.className.match(/(leave|leave-to|leave-active)/)).toBeFalsy();
+      });
     });
 
     it(':name', () => {
       const transitionComp = simulate.render(transitionId, { name: 'foo' });
       transitionComp.attach(document.createElement('parent-wrapper'));
       const [transitionDom] = transitionComp.dom.children;
 
-      transitionComp.setData({ visible: true });
-      jest.runAllTimers();
-      expect(transitionDom.className.match(/foo-enter/)).toBeTruthy();
-      expect(transitionDom.className.match(/foo-enter-active/)).toBeTruthy();
-      expect(transitionDom.className.match(/foo-enter-to/)).toBeTruthy();
+      transitionComp.setData({ visible: true }, () => {
+        jest.runAllTimers();
+        expect(transitionDom.className.match(/foo-enter/)).toBeTruthy();
+        expect(transitionDom.className.match(/foo-enter-active/)).toBeTruthy();
+        expect(transitionDom.className.match(/foo-enter-to/)).toBeTruthy();
+      });
     });
 
     // it(':destroyOnHide', () => {
@@ -93,13 +95,14 @@ describe('transition', () => {
     // });
 
     it(':appear', () => {
-      const transitionComp = simulate.render(transitionId, { visible: true, appear: true });
-      transitionComp.attach(document.createElement('parent-wrapper'));
-      const [transitionDom] = transitionComp.dom.children;
-      expect(transitionDom.className.match(/enter\s/)).toBeTruthy();
-      expect(transitionDom.className.match(/enter-active/)).toBeTruthy();
-      jest.runAllTimers();
-      expect(transitionDom.className.match(/enter-to/)).toBeTruthy();
+      const transitionComp = simulate.render(transitionId, { visible: true, appear: true }, () => {
+        transitionComp.attach(document.createElement('parent-wrapper'));
+        const [transitionDom] = transitionComp.dom.children;
+        expect(transitionDom.className.match(/enter\s/)).toBeTruthy();
+        expect(transitionDom.className.match(/enter-active/)).toBeTruthy();
+        jest.runAllTimers();
+        expect(transitionDom.className.match(/enter-to/)).toBeTruthy();
+      });
     });
 
     it(':durations', () => {