Mounted 中的类更改不会触发过渡 vuejs答案

【问题标题】：class change in Mounted not triggering transition vuejsMounted 中的类更改不会触发过渡 vuejs
【发布时间】：2018-07-17 10:50:35
【问题描述】：

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

但是，如果我使用 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 已经意味着初始视图已经渲染。所以已经有一个初始渲染状态。

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

所以挂载了！== 渲染了吗？

【问题讨论】：

Mounted 是用新的虚拟 DOM 替换真实 DOM。它不会满足您的需求。
@skribe 为什么会这样？如果mounted意味着真实DOM被虚拟DOM替换，那么在我修改mounted中元素的类之前，真实DOM中应该已经有一个初始渲染元素
我确信它是如何工作的所有基础，我只知道我尝试过类似的事情并且失败了。 DOM 被渲染然后挂载。在这里查看另一种方法来做你似乎想要做的事情。 stackoverflow.com/questions/40618894/…
@strike 使用过渡组件是一个好方法。但是我仍在尝试找出原因。我也尝试过使用类绑定并做：this.loaded = true 来更改阶段，从而触发挂载的类更改。还是不行。

标签： javascript css animation vue.js css-transitions

【解决方案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')

【讨论】：