After attempting to apply a class to an element in the mounted lifecycle, I noticed that the transition effect was not taking place. The element would immediately display in its final state:
However, when I used setTimeout to delay the class change, the transition worked as expected.
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>I have come to understand that this behavior is common in vanilla js: Transitions require rendering from one state to another. The delay allows for the initial rendering of the element to take place first. (Refer to this SO post)
Despite my assumption that 'mounted' in Vue signifies the completion of initial rendering, it appears that there may still be some differences.
This example suggests that 'mounted' does not necessarily mean 'rendered.'
Therefore, is 'mounted' not equivalent to 'rendered'?