diff --git a/example/project.config.json b/example/project.config.json
index 376977d9..733fc56b 100644
--- a/example/project.config.json
+++ b/example/project.config.json
@@ -334,6 +334,14 @@
 					"id": -1,
 					"name": "uploader",
 					"pathName": "pages/uploader/index",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "dropdown-menu",
+					"pathName": "pages/dropdown-menu/index",
+					"query": "",
 					"scene": null
 				}
 			]
diff --git a/packages/dropdown-item/index.ts b/packages/dropdown-item/index.ts
index b8ace9ed..8f394614 100644
--- a/packages/dropdown-item/index.ts
+++ b/packages/dropdown-item/index.ts
@@ -10,7 +10,7 @@ VantComponent({
     current: 'dropdown-item',
     linked() {
       this.updateDataFromParent();
-    },
+    }
   },
 
   props: {
@@ -31,7 +31,8 @@ VantComponent({
       type: Array,
       value: [],
       observer: 'rerender'
-    }
+    },
+    popupStyle: String
   },
 
   data: {
@@ -67,11 +68,23 @@ VantComponent({
       }
     },
 
-    onClickOverlay() {
-      this.toggle();
+    onOpen() {
+      this.$emit('open');
+    },
+
+    onOpened() {
+      this.$emit('opened');
+    },
+
+    onClose() {
       this.$emit('close');
     },
 
+    onClosed() {
+      this.$emit('closed');
+      this.setData({ showWrapper: false });
+    },
+
     onOptionTap(event: Weapp.Event) {
       const { option } = event.currentTarget.dataset;
       const { value } = option;
@@ -80,10 +93,6 @@ VantComponent({
       this.setData({ showPopup: false, value });
       this.$emit('close');
 
-      setTimeout(() => {
-        this.setData({ showWrapper: false });
-      }, this.data.duration || 0);
-
       this.rerender();
 
       if (shouldEmitChange) {
@@ -92,9 +101,9 @@ VantComponent({
     },
 
     toggle(show, options = {}) {
-      const { showPopup, duration } = this.data;
+      const { showPopup } = this.data;
 
-      if (show == null) {
+      if (typeof show !== 'boolean') {
         show = !showPopup;
       }
 
@@ -102,27 +111,19 @@ VantComponent({
         return;
       }
 
-      if (!show) {
-        const time = options.immediate ? 0 : duration;
-        this.setData({ transition: !options.immediate, showPopup: show });
-
-        setTimeout(() => {
-          this.setData({ showWrapper: false });
-        }, time);
-
-        this.rerender();
-        return;
-      }
-
-      this.parent.getChildWrapperStyle().then((wrapperStyle: String = '') => {
-        this.setData({
-          transition: !options.immediate,
-          showPopup: show,
-          wrapperStyle,
-          showWrapper: true
-        });
-        this.rerender();
+      this.setData({
+        transition: !options.immediate,
+        showPopup: show,
       });
+
+      if (show) {
+        this.parent.getChildWrapperStyle().then((wrapperStyle: string) => {
+          this.setData({ wrapperStyle, showWrapper: true });
+          this.rerender();
+        });
+      } else {
+        this.rerender();
+      }
     }
   }
 });
diff --git a/packages/dropdown-item/index.wxml b/packages/dropdown-item/index.wxml
index 86f2acc0..dd75292f 100644
--- a/packages/dropdown-item/index.wxml
+++ b/packages/dropdown-item/index.wxml
@@ -7,13 +7,17 @@
 >
   <van-popup
     show="{{ showPopup }}"
-    custom-style="position: absolute;"
+    custom-style="position: absolute;{{ popupStyle }}"
     overlay-style="position: absolute;"
     overlay="{{ overlay }}"
     position="{{ direction === 'down' ? 'top' : 'bottom' }}"
     duration="{{ transition ? duration : 0 }}"
     close-on-click-overlay="{{ closeOnClickOverlay }}"
-    bind:close="onClickOverlay"
+    bind:enter="onOpen"
+    bind:leave="onClose"
+    bind:close="toggle"
+    bind:after-enter="onOpened"
+    bind:after-leave="onClosed"
   >
     <van-cell
       wx:for="{{ options }}"
diff --git a/packages/dropdown-menu/README.md b/packages/dropdown-menu/README.md
index e2ff8149..9535915e 100644
--- a/packages/dropdown-menu/README.md
+++ b/packages/dropdown-menu/README.md
@@ -83,18 +83,18 @@ Page({
       { text: '新款商品', value: 1 },
       { text: '活动商品', value: 2 }
     ],
-    value1: 0,
+    value1: 0
   },
 
-  onConfirm () {
+  onConfirm() {
     this.selectComponent('#item').toggle();
   },
 
-  onSwitch1Change ({ detail }) {
+  onSwitch1Change({ detail }) {
     this.setData({ switch1: detail });
   },
 
-  onSwitch2Change ({ detail }) {
+  onSwitch2Change({ detail }) {
     this.setData({ switch2: detail });
   }
 });
@@ -131,45 +131,49 @@ Page({
 
 ### DropdownMenu Props
 
-| Attribute              | Description                    | Type      | Default   | Version |
-| ---------------------- | ------------------------------ | --------- | --------- | ------- |
-| active-color           | 菜单标题和选项的选中态颜色     | *string*  | `#1989fa` | -       |
-| z-index                | 菜单栏 z-index 层级            | *number*  | `10`      | -       |
-| duration               | 动画时长，单位毫秒             | *number*  | `200`     | -       |
-| direction              | 菜单展开方向，可选值为up       | *string*  | `down`    | -       |
-| overlay                | 是否显示遮罩层                 | *boolean* | `true`    | -       |
-| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | *boolean* | `true`    | -       |
-| close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | *boolean* | `true`    | -       |
+| 参数                   | 说明                           | 类型      | 默认值    |
+| ---------------------- | ------------------------------ | --------- | --------- |
+| active-color           | 菜单标题和选项的选中态颜色     | _string_  | `#1989fa` |
+| z-index                | 菜单栏 z-index 层级            | _number_  | `10`      |
+| duration               | 动画时长，单位毫秒             | _number_  | `200`     |
+| direction              | 菜单展开方向，可选值为 up      | _string_  | `down`    |
+| overlay                | 是否显示遮罩层                 | _boolean_ | `true`    |
+| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | _boolean_ | `true`    |
+| close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | _boolean_ | `true`    |
 
 ### DropdownItem Props
 
-| Attribute   | Description            | Type               | Default                 | Version |
-| ----------- | ---------------------- | ------------------ | ----------------------- | ------- |
-| value       | 当前选中项对应的 value | *string \| number* | -                       | -       |
-| title       | 菜单项标题             | *string*           | Text of selected option | -       |
-| options     | 选项数组               | *Option[]*         | `[]`                    | -       |
-| disabled    | 是否禁用菜单           | *boolean*          | `false`                 | -       |
-| title-class | 标题额外类名           | *string*           | -                       | -       |
+| 参数        | 说明                   | 类型               | 默认值         |
+| ----------- | ---------------------- | ------------------ | -------------- |
+| value       | 当前选中项对应的 value | _number \| string_ | -              |
+| title       | 菜单项标题             | _string_           | 当前选中项文字 |
+| options     | 选项数组               | _Option[]_         | `[]`           |
+| disabled    | 是否禁用菜单           | _boolean_          | `false`        |
+| title-class | 标题额外类名           | _string_           | -              |
+| popup-style | 自定义弹出层样式       | _string_           | -              |
 
 ### DropdownItem Events
 
-| Event  | Description                   | Arguments |
-| ------ | ----------------------------- | --------- |
-| change | 点击选项导致 value 变化时触发 | value     |
-| close  | 关闭菜单栏时触发              | -         |
+| 事件名 | 说明                          | 回调参数 |
+| ------ | ----------------------------- | -------- |
+| change | 点击选项导致 value 变化时触发 | value    |
+| open   | 打开菜单栏时触发              | -        |
+| close  | 关闭菜单栏时触发              | -        |
+| opened | 打开菜单栏且动画结束后触发    | -        |
+| closed | 关闭菜单栏且动画结束后触发    | -        |
 
-### DropdownItem Methods
+### DropdownItem 方法
 
 通过 selectComponent(id) 可访问
 
-| Name   | Attribute     | Return value | Description      |
-| ------ | ------------- | ------------ | ---------------- |
-| toggle | show: boolean | -            | 切换菜单是否展示 |
+| 方法名 | 说明                                                          | 参数           | 返回值 |
+| ------ | ------------------------------------------------------------- | -------------- | ------ |
+| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | -      |
 
-### Data Structure of Option
+### Option 数据结构
 
-| Key   | Description                                | Type               |
-| ----- | ------------------------------------------ | ------------------ |
-| text  | 文字                                       | *string*           |
-| value | 标识符                                     | *string \| number* |
-| icon  | 左侧图标名称或图片链接，可选值见 Icon 组件 | *string*           |
+| 键名  | 说明                             | 类型               |
+| ----- | -------------------------------- | ------------------ |
+| text  | 文字                             | _string_           |
+| value | 标识符                           | _number \| string_ |
+| icon  | 左侧[图标名称](#/icon)或图片链接 | _string_           |
diff --git a/packages/mixins/transition.ts b/packages/mixins/transition.ts
index a931767e..ecf6dd66 100644
--- a/packages/mixins/transition.ts
+++ b/packages/mixins/transition.ts
@@ -37,14 +37,11 @@ export const transition = function(showDefaultValue: boolean) {
       display: false
     },
 
-    attached() {
-      if (this.data.show) {
-        this.enter();
-      }
-    },
-
     methods: {
-      observeShow(value: boolean) {
+      observeShow(value: boolean, old: boolean) {
+        if (value === old) {
+          return;
+        }
         value ? this.enter() : this.leave();
       },