[Vuejs]-VueJS transitions not working without setTimeout

by

0👍

I’m guessing that you’re using filterStyles in a template, something like: :style="filterStyles". If that’s the case, then

Vue.set(this.filterStyles, filterIndex, {
    display: "block",
    height: "auto",
});

won’t actually set the height to auto immediately. Rather, it updates the component’s data, and that update will be reflected in the DOM after a nextTick(). So, in effect, your code is off by one tick.

Stacking a series of nextTick calls one after the other is probably a bad practice, however. If, for example, the component is removed during the series, you’ll be left with a dangling reference.

You could avoid all those ticks by just setting the style directly in order to measure its natural height. If the element has ref="filter" attribute, for example, then something like:

this.$refs.filter.style.height = "auto";
filterValuesElHeight = this.$refs.filter.clientHeight;
this.$refs.filter.style.height = "0";

You may have to work out conflicts between the template and the inline JavaScript (I can’t tell because you don’t show your template.), but that should get you started.

Leave a comment