My code successfully slides out a menu:
Vue.set(this.filterStyles, filterIndex, {
display: "block",
height: "auto",
});
let filterValuesElHeight;
Vue.nextTick().then(() => {
let filterValuesEl = document.getElementById('parent-filter-values-' + filterIndex);
filterValuesElHeight = filterValuesEl.clientHeight;
Vue.set(this.filterStyles, filterIndex, {
height: 0,
display: "block"
});
return Vue.nextTick();
}).then(() => {
setTimeout(() => {
Vue.set(this.filterStyles, filterIndex, {
height: filterValuesElHeight + "px",
display: "block"
});
}, 10);
});
The initial setup of the menu includes the following rules:
display: none;
height: 0;
transition: all 500ms;
The first Vue.set sets the height to auto in order to accurately calculate its height using filterValuesEl.clientHeight
After returning to 0 on the next tick, the final tick then sets it to its natural height.
Despite using Vue.nextTick(), I found that adding a tiny timeout seems to be necessary. While this solution works, it feels somewhat messy. Is there a cleaner alternative?