vue v-bind风格-平滑更改，而不是立即更改

Question

我使用"vuex-module-decorators“并动态确定此getter中的样式：

<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

您只需使用类.viewport将CSS中的过渡添加到div中，如下所示：

.viewport{
  transition: all 1s linear;
}

1s in The transition，是操作将采取的时间，您可以将此值调整为更小的值，如0.1s，如果这更适合您的话。