В Vue, как я могу выполнить пакет изменений в элементе DOM?

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 в 1 раз

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