VueX warten, bis Modal geschlossen wird, bevor es mit neuen Daten wieder geöffnet wird

Question

Ich versuche einen reibungslosen Übergang mit einem Vue-Modal (the one in the guide) zu gewährleisten. Meine VueX store.js Datei enthält diese Mutation:

swapModalView (state, view) { 
    state.modalView = 'none' 
    state.modalView = view 
} 

Der Modal schließt, wenn der Blick auf gesetzt ist „none“, und wieder öffnet, wenn es etwas anderes ist.

<VueModal v-if="modalView != 'none'"></VueModal> 

Es ist wahrscheinlich ziemlich einfach, aber wie kann ich die Ansicht zu ändern „none“, und es dann zu der Ansicht gesetzt geleitet wird nach dem Übergang endet? Ich würde denken, ich könnte es einfach hier tun, in der Mutation, oder?

Answer 1

Ich habe es gefunden. Einfaches Einrichten eines Ereignis-Listeners für einen CSS-Übergang, den ich nie gemacht habe, ohne irgendwo Code zu kopieren.

swapModalView (state, view) { 
    let modal = document.getElementById('locustModal') 
    var launchNew = function (event) { 
    state.modalView = view 
    modal.removeEventListener('transitionend', launchNew) 
    } 
    state.modalView = 'none' 
    modal.addEventListener('transitionend', launchNew, false) 
}