时间戳

首页 > 解决方案 > 列表离开动画和 DOM 更新后的回调 - VueJS

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

问题描述

要在 Vue 更新 DOM 后做某事，您可以使用$nextTick绑定。

要在 css 转换完成后做某事，你可以使用transitionendevent.

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

我在想，在列表项被删除$nextTick后transitionend， DOM 的状态将是 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);

}

标签： vue.jstransitionend

解决方案

也许您可以使用自定义指令。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>

推荐阅读