等待 DOM 在 vue 中更新

Posted 2023-02-22

【中文标题】等待 DOM 在 vue 中更新

【英文标题】：Waiting for the DOM to update in vue

【发布时间】：2021-12-11 21:30:41

【问题描述】：

为了让动画正常工作，我尝试在一个方法中连续更新数据，但更新速度很快。

之前通过将自定义属性 --int-menu-height 设置为高度来为相关元素设置动画，并通过 $ref 检索。然后，transitionend 事件将该变量设置为auto。现在要在另一个方向进行相同的转换，我需要首先删除自动并将其替换为可插值，然后然后将其设置为零，以便它在这两个值之间进行动画处理。还有另一个transitionend 事件正在等待，以完成整个交互。这就是我现在的结束代码的样子：

const comp = this;
const menu = this.$refs.menu;
const menuHeight = this.$refs.menuHeight.clientHeight+'px';

// set it too the actual height (from previously 'auto')
this.menuStyles =  '--int-menu-height': menuHeight ;
this.$nextTick( () => 
    // set it to zero, so that it animates
    this.menuStyles =  '--int-menu-height': 0  
);

// never firing, because no transition
menu.addEventListener('transitionend', function closeMenu() 
    comp.isMenuOpen = false;
    menu.removeEventListener('transitionend', closeMenu);
);

我认为$nextTick() 可以解决问题，但它仍然发生得很快。在确保之前的更新已完全呈现后，我如何才能更新this.menuStyles仅？

【问题讨论】：

与其创建自定义监听器，不如使用 vue 的转换 API 呢？ vuejs.org/v2/guide/transitions.html

@JimishFotariya 它不能在我的具体实例中使用。目前，我不是在寻找动画的解决方案，而是在寻求有关我的特定代码的帮助。

可能是因为 $nextTick() 没有按预期工作，请阅读这篇文章：***.com/questions/47634258/…

尝试使用setTimeout 而不是$nextTick()

天哪，现在我觉得自己很笨。但是，当然，这一切都奏效了！谢谢！

【参考方案1】：

就像Radeanu 指出的那样，我可以使用setTimeout()。因为$nextTick() 在虚拟 DOM 中更新后触发，而不是在真实 DOM 中。我现在使用的有效代码如下所示：

setTimeout( () => 
    // set it to zero, so that it animates
    this.menuStyles =  '--int-menu-height': 0  
, 1);