diff options
Diffstat (limited to 'doc/docs/.vuepress/theme/components/DropdownTransition.vue')
-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> | ||