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

VueX 在使用新数据重新打开之前等待模式关闭

VueX wait for modal to close before reopening with new data

vue.js

vuex