Question

当我尝试将类添加到已安装生命周期中的元素时，转换效果不起作用。该元素立即显示为最终状态：

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我理解为什么会发生这种情况，如果它出现在vanilla js中：转换需要从一个呈现状态发生到另一个呈现状态。延迟是允许首先渲染初始元素。（Refer to this SO post）

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

从这个例子来看，似乎并非如此。

安装好了！==渲染？

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

0 个答案: