Waiting for the DOM to update in vue

Question

In order to get an animation to work, I am trying to update data in a method consecutively, but the updates are happening to fast.

The element in question was previously animated by setting a custom property --int-menu-height to a height, retrieved via a $ref. A transitionend event is then setting that variable to auto. Now to get the same transition into the other direction, I need to first remove the auto and replace it with an interpolatable value, and then set it to zero, so that it animates between those two values. There is another transitionend event waiting, to finish the entire interaction. This is what my code for the closing looks like, right now:

const comp = this;
const menu = this.$refs.menu;
const menuHeight = this.$refs.menuHeight.clientHeight+'px';

// set it too the actual height (from previously 'auto')
this.menuStyles = { '--int-menu-height': menuHeight };
this.$nextTick( () => {
    // set it to zero, so that it animates
    this.menuStyles = { '--int-menu-height': 0 } 
});

// never firing, because no transition
menu.addEventListener('transitionend', function closeMenu() {
    comp.isMenuOpen = false;
    menu.removeEventListener('transitionend', closeMenu);
});

I'm thought that $nextTick() would do the trick, but it is still happening to fast. How can I update this.menuStyles only after making sure that the previous update has fully rendered through?

Instead of creating your custom listeners, Why don't you utilize the transitions API of vue ? https://vuejs.org/v2/guide/transitions.html — Jimish Fotariya, Oct 26 '21 at 13:50
@JimishFotariya It cannot be utilised in my specific instance. At the moment, I am not looking for a solution to my animation, I am rather looking for help with my specific code. — Nachtfunke, Oct 26 '21 at 14:02
Maybe it's because **$nextTick()** not working as you expect, read this post: https://stackoverflow.com/questions/47634258/what-is-nexttick-and-what-does-it-do-in-vue-js — Vasile Radeanu, Oct 26 '21 at 14:18
Oh dear, now I feel really dumb. But of course, that made it all work! Thank you! — Nachtfunke, Oct 26 '21 at 14:54

score 0 · Answer 1 · answered Oct 26 '21 at 14:57

Like Radeanu pointed out, I can just use setTimeout(). Because $nextTick() fires after an update in the virtual DOM, not in the real DOM. The code that I use now, that works, looks like this:

setTimeout( () => {
    // set it to zero, so that it animates
    this.menuStyles = { '--int-menu-height': 0 } 
}, 1);

Waiting for the DOM to update in vue

1 Answers1