Para que una animación funcione, estoy tratando de actualizar los datos en un método de forma consecutiva, pero las actualizaciones están ocurriendo demasiado rápido.
El elemento en cuestión se animó previamente estableciendo una propiedad personalizada --int-menu-height en una altura, recuperada a través de $ref . Un evento de transitionend está configurando esa variable en auto . Ahora, para obtener la misma transición en la otra dirección, primero debo eliminar el auto y reemplazarlo con un valor interpolable, y luego establecerlo en cero, para que se anime entre esos dos valores. Hay otro evento de transitionend final esperando, para terminar toda la interacción. Así es como se ve mi código para el cierre, en este momento:
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); }); Pensé que $nextTick() , pero aún está sucediendo demasiado rápido. ¿Cómo puedo actualizar this.menuStyles solo después de asegurarme de que la actualización anterior se haya procesado por completo?
Como señaló Radeanu , solo puedo usar setTimeout() . Porque $nextTick() después de una actualización en el DOM virtual, no en el DOM real. El código que uso ahora, que funciona, se ve así:
setTimeout( () => { // set it to zero, so that it animates this.menuStyles = { '--int-menu-height': 0 } }, 1);