diff options
Diffstat (limited to '')
| -rw-r--r-- | doc/docs/.vuepress/theme/components/DropdownTransition.vue | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/doc/docs/.vuepress/theme/components/DropdownTransition.vue b/doc/docs/.vuepress/theme/components/DropdownTransition.vue new file mode 100644 index 0000000..eeaf12b --- /dev/null +++ b/doc/docs/.vuepress/theme/components/DropdownTransition.vue | |||
| @@ -0,0 +1,33 @@ | |||
| 1 | <template> | ||
| 2 | <transition | ||
| 3 | name="dropdown" | ||
| 4 | @enter="setHeight" | ||
| 5 | @after-enter="unsetHeight" | ||
| 6 | @before-leave="setHeight" | ||
| 7 | > | ||
| 8 | <slot /> | ||
| 9 | </transition> | ||
| 10 | </template> | ||
| 11 | |||
| 12 | <script> | ||
| 13 | export default { | ||
| 14 | name: 'DropdownTransition', | ||
| 15 | |||
| 16 | methods: { | ||
| 17 | setHeight (items) { | ||
| 18 | // explicitly set height so that it can be transitioned | ||
| 19 | items.style.height = items.scrollHeight + 'px' | ||
| 20 | }, | ||
| 21 | |||
| 22 | unsetHeight (items) { | ||
| 23 | items.style.height = '' | ||
| 24 | } | ||
| 25 | } | ||
| 26 | } | ||
| 27 | </script> | ||
| 28 | |||
| 29 | <style lang="stylus"> | ||
| 30 | .dropdown-enter, .dropdown-leave-to | ||
| 31 | height 0 !important | ||
| 32 | |||
| 33 | </style> | ||
