javascript - Mounted 中的类更改不触发转换 vuejs

Question

当我尝试将类添加到挂载生命周期中的元素时，过渡效果不起作用。该元素立即作为最终状态出现:

但是，如果我使用 setTimeout 来延迟类更改，转换将起作用。

new Vue({
  el: '#example-1',
  mounted: function () { 
     // setTimeout(function () {
      let test = document.getElementsByClassName('test')[0]
      test.classList.add('loaded')
     // }, 0) 
  }
})

.test {
  color:red;
  font-size:60px;
  transform:none;
  transition: all 1s linear;
}

.test.loaded {
  transform: translateX(400px)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>


<div id="example-1">
  <h1 class='test'>
    fa
  </h1>
</div>

我理解为什么在 vanilla js 中会发生这种情况:转换需要从一种呈现状态发生到另一种呈现状态。延迟是为了让初始元素首先呈现。( Refer to this SO post )

然而在Vue中，我认为Mounted已经意味着初始 View 已经被渲染了。所以已经有一个初始渲染状态。

从这个例子看来，情况并非如此。

所以 mounted !== 被渲染了吗？

Answer 1

如果在将元素添加到 DOM 之后立即添加类，浏览器将无法触发 CSS 转换，因为当浏览器检查转换时，它还会检查之前应用的转换，结果是无，因此它会跳过过渡。这就是为什么您需要一些 setTimeout 或 requestAnimationFrame 来使其工作的原因。 这是一个没有 Vue 的演示 🙂

const a = document.createElement('div')
a.textContent = 'fa'
a.classList.add('test')
document.body.appendChild(a)
a.classList.add('loaded')