列表离开后的回调动画和DOM更新- VueJS

Question

若要在Vue更新DOM之后执行某些操作，请使用$nextTick绑定。

要在css转换完成后执行某些操作，可以使用transitionend事件。

我有一个动态列表，在这个列表中，用户操作可以添加和删除内容。删除后，会有一个CSS动画，然后我需要在元素消失后立即检查DOM的状态。

我在想，在删除列表项之后，transitionend后面的transitionend将是DOM的状态，但事实并非如此。

在转换结束后，我需要做一些事情和，列表中的元素已经从DOM中删除了。

现在我有：

<transition-group class="message-bus" tag="ul" name="message-bus">
    <li v-for="message in messages" v-bind:key="message.id" :ref="message.id">
        <div>{{message.text}}</div>
        <a class="dismiss-message" @click="dismissMessage(message)">&times;</a>
    </li>
</transition-group>

dismissMessage(message){
    const vm = this;

    this.$refs[message.id][0].addEventListener("transitionend", function(){
        vm.$nextTick(function(){
            //This is called, but appears to be called before the element is actually removed from the DOM
            //I need to query the DOM immediately after this element is removed 
        });
    });

    this.messages.splice(this.messages.indexOf(message), 1);

}

Answer 1

在挂载函数中，我添加了一个MutationObserver，它似乎可以根据需要工作。我会在这里作为一个答案，因为它在技术上是可行的，并可能对其他人有帮助，但我仍然感兴趣的是一个更好的答案，如果Vue有内置的东西。

mounted(){
    const vm = this;
    const listItemRemoved = new MutationObserver(function(e){
        if (e[0].removedNodes.length){
            console.log("Removed");
        }
    });
    listItemRemoved.observe(this.$el, {childList: true});
}

Answer 2

也许您可以使用自定义指令。在unbind钩子中执行所需的操作。

created() {
    this.vm = this
},
directives: {
  foo: {
    unbind(el, binding) {
      // Here you can perform the actions you need.
      // You can access the Vue instance using binding.value (eg: binding.value.$el)
    }
  }
},

在你的模板里。

<transition-group class="message-bus" tag="ul" name="message-bus">
    <li v-for="message in messages" v-bind:key="message.id" :ref="message.id" v-foo="vm">
        <div>{{message.text}}</div>
        <a class="dismiss-message" @click="dismissMessage(message)">&times;</a>
    </li>
</transition-group>