Question

我正在做一个动画片，其中一个缩略图会爆炸以占据整个屏幕。第一步是获取元素，将其位置更改为绝对，并使用样式对象明确指定当前占用的维度和位置。然后我做我的动画。

大部分时间它运行良好，但我似乎得到了DOM渲染，它捕捉我的元素处于中间状态，它的位置变为绝对但未设置尺寸。在Vue中，有没有办法将一组元素的更新分组到一个批处理中？

var me = this;
var outer = this.$refs.outer;
if (!this.vueStore.previewing) {
    var rect = outer.getBoundingClientRect();
    this.elStyle.height = rect.bottom - rect.top;
    this.elStyle.width = rect.right - rect.left;
    this.elStyle.top = rect.top;
    this.elStyle.left = rect.left;
    this.elStyle.zIndex = 100;
    this.elStyle.position = 'absolute';
    this.elStyle.transition = 'all 0.5s ease-in-out';
    setTimeout(function () {
        this.elStyle.top = this.vueStore.contentRect.top;
        this.elStyle.left = this.vueStore.contentRect.left;
        this.elStyle.height = this.vueStore.contentRect.bottom;
        this.elStyle.width = this.vueStore.contentRect.right;
    }, 300);
} else {...

Answer 1

您应该在一次性分配elStyle

var me = this;
var outer = this.$refs.outer;
if (!this.vueStore.previewing) {
    var rect = outer.getBoundingClientRect();
    me.elStyle = Object.assign({}, me.elStyle, {
      height: rect.bottom - rect.top,
      width: rect.right - rect.left,
      top: rect.top,
      left: rect.left,
      zIndex: 100,
      position: absolute
    })
    setTimeout(function () {
        me.elStyle = Object.assign({}, me.elStyle, {
          height: me.vueStore.contentRect.bottom - 50;,
          width: me.vueStore.contentRect.right,
          top: me.vueStore.contentRect.top,
          left: me.vueStore.contentRect.left,
        })
    }, 300);
}

在Vue中，如何批量更改DOM元素？

1 个答案: