[improvement] DropdownMenu: optimize transition

packages/dropdown-item/index.js

@@ -1,4 +1,4 @@
-import { use, isDef } from '../utils';
+import { use } from '../utils';
 import Cell from '../cell';
 import Icon from '../icon';
 import Popup from '../popup';
@@ -19,7 +19,9 @@ export default sfc({
 
   data() {
     return {
-      show: false
+      transition: true,
+      showPopup: false,
+      showWrapper: false
     };
   },
 
@@ -36,7 +38,19 @@ export default sfc({
 
   methods: {
     toggle(show) {
-      this.show = isDef(show) ? show : !this.show;
+      this.showPopup = !this.showPopup;
+
+      if (this.showPopup) {
+        this.showWrapper = true;
+      }
+    },
+
+    hide(skipTransition) {
+      this.showPopup = false;
+
+      if (skipTransition) {
+        this.transition = false;
+      }
     }
   },
 
@@ -52,7 +66,7 @@ export default sfc({
           title={option.text}
           titleStyle={{ color: active ? activeColor : '' }}
           onClick={() => {
-            this.show = false;
+            this.showPopup = false;
 
             if (option.value !== this.value) {
               this.$emit('input', option.value);
@@ -68,11 +82,11 @@ export default sfc({
     const emit = eventName => () => this.$emit(eventName);
 
     return (
-      <div vShow={this.show} style={{ top: `${top}px`, zIndex }} class={bem()}>
+      <div vShow={this.showWrapper} style={{ top: `${top}px`, zIndex }} class={bem()}>
         <Popup
-          vModel={this.show}
+          vModel={this.showPopup}
           position="top"
-          duration={0.2}
+          duration={this.transition ? 0.2 : 0}
           class={bem('content')}
           overlay={overlay}
           closeOnClickOverlay={closeOnClickOverlay}
@@ -80,6 +94,11 @@ export default sfc({
           onOpen={emit('open')}
           onOpened={emit('opened')}
           onClose={emit('close')}
+          onClosed={() => {
+            this.transition = true;
+            this.showWrapper = false;
+            this.$emit('closed');
+          }}
         >
           {Options}
           {this.slots('default')}

packages/dropdown-menu/index.js

@@ -45,15 +45,15 @@ export default sfc({
       this.children.forEach((item, index) => {
         if (index === active) {
           item.toggle();
-        } else {
-          item.toggle(false);
+        } else if (item.showPopup) {
+          item.hide(true);
         }
       });
     },
 
     onClickOutside() {
       this.children.forEach(item => {
-        item.toggle(false);
+        item.hide();
       });
     }
   },
@@ -70,7 +70,7 @@ export default sfc({
       >
         <span
           class={[bem('title', { active: item.show }), item.titleClass]}
-          style={{ color: item.show ? this.activeColor : '' }}
+          style={{ color: item.showPopup ? this.activeColor : '' }}
         >
           {item.displayTitle}
         </span>

packages/dropdown-menu/test/__snapshots__/index.spec.js.snap

@@ -4,8 +4,8 @@ exports[`click option 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
   <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2005;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style=""><span>A</span></div>
       </div>
@@ -56,7 +56,7 @@ exports[`disable dropdown item 1`] = `
 
 exports[`show dropdown item 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active" style="color: rgb(25, 137, 250);">A</span></div>
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="color: rgb(25, 137, 250);">A</span></div>
   <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
@@ -81,7 +81,7 @@ exports[`show dropdown item 2`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
   <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
@@ -103,8 +103,8 @@ exports[`show dropdown item 2`] = `
 exports[`show dropdown item 3`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
-  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active" style="color: rgb(25, 137, 250);">A</span></div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+  <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="color: rgb(25, 137, 250);">A</span></div>
+  <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>

packages/dropdown-menu/test/index.spec.js

@@ -53,8 +53,9 @@ test('click option', async () => {
   titles.at(0).trigger('click');
 
   const options = wrapper.findAll('.van-dropdown-item .van-cell');
-
   options.at(1).trigger('click');
+
+  await later();
   expect(wrapper).toMatchSnapshot();
 });