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

Posted 2023-02-22

【中文标题】Mounted 中的类更改不会触发过渡 vuejs

【英文标题】：class change in Mounted not triggering transition 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 被渲染然后挂载。在这里查看另一种方法来做你似乎想要做的事情。 ***.com/questions/40618894/…

@strike 使用过渡组件是一个好方法。但是我仍在尝试找出原因。我也尝试过使用类绑定并做：this.loaded = true 来更改阶段，从而触发挂载的类更改。还是不行。

【参考方案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')