在重新打开新数据之前，VueX等待模态关闭

Question

我正在尝试使用vue模态（the one in the guide）确保平滑过渡。我的VueX store.js文件包含此突变：

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

当视图设置为“none”时，模态关闭，并在其他任何内容时重新打开。

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

它可能非常简单，但是如何将视图更改为“none”，然后将其设置为转换结束后传递的视图？我想我可以在这里做，突变，对吗？

Answer 1

我找到了。只是基本设置一个css转换的事件监听器，我从来没有在没有复制某些代码的情况下做过。

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)
}