vuejs组件过渡工作仅一次

Question

我正在使用nuxt和vuejs创建滑块 我创建了一个过渡，可以在不同的幻灯片之间移动，如下所示：

模板：

<transition name="slide-fade" mode="in-out">
  <slide1 v-if='activeSlide === "slide1"' />
  <slide2 v-if='activeSlide === "slide2"' />
</transition>

脚本：

computed: {
  activeSlide() {
    return this.loadedSlide
  }
},

因此此代码将在我的幻灯片组件处于活动状态时挂载它。

在slide1 componenet Mounted（）挂钩中，我这样创建了平滑的缩放变换：

mounted() {
      document.querySelector('.background').setAttribute('style', 'transform:scale(1)')
    },

当我重新加载页面时，第一次幻灯片过渡仅工作一次，但是在激活幻灯片后重新加载后，它将不再起作用；

我尝试使用classList.add，它也只能工作一次。

当我在挂接钩中使用console.log时，它可以按预期工作，但不会按预期添加类或属性