vue стиль v-bind - плавные изменения, а не мгновенные

Question

Я использую "vuex-module-decorators" и динамически определяю стиль в этом геттере:

<div class="viewport":style="viewportStyleVars">...</div>

get viewportStyleVars() {
      const tx = -this.viewportRect.x;
      const ty = -this.viewportRect.y;
      return {
        '--translate-x': `${tx}px`,
        '--translate-y': `${ty}px`,
      }
    }

Как сделать так, чтобы изменения происходили плавно, а не мгновенно? Буду благодарен за подсказки, я не знаком с анимацией.

Answer 1

Вам просто нужно добавить переход в CSS к div с классом .viewport что-то вроде:

.viewport{
  transition: all 1s linear;
}

1s в переходе, это время, которое Если действие будет выполнено, вы можете настроить это значение на что-то меньшее, например, 0,1 с, если это вам подходит.