documentation/.vuepress/theme/DropdownTransition.vue
2018-07-28 13:47:12 -07:00

30 lines
695 B
Vue

<template>
<transition name="dropdown"
@enter="setHeight"
@after-enter="unsetHeight"
@before-leave="setHeight">
<slot></slot>
</transition>
</template>
<script>
export default {
name: 'DropdownTransition',
methods: {
setHeight(items) {
// explicitly set height so that it can be transitioned
items.style.height = items.scrollHeight + 'px';
},
unsetHeight(items) {
items.style.height = '';
}
}
};
</script>
<style>
.dropdown-enter, .dropdown-leave-to {
height: 0 !important;
}
</style>