0

I want to trigger an animation to run as soon as a component is mounted.

I've put the change inside a $nextTick function inside the mounted callback but it appears that it applies immediately before the component is first rendered, so the item appears in its final state without playing the animation to reach that point.

A fiddle of the problem is here: https://jsfiddle.net/j1oupq5e/1/

The relevant mounted function is as follows (width starts at 1px by default):

mounted() {
  this.$nextTick(function(){this.width="100%"})
}

How can I make that animation start playing upon the component being mounted?

bdx
  • 3,316
  • 4
  • 32
  • 65

1 Answers1

0

you can call setTimeout function :

mounted() {
  let _this=this;
    setTimeout(function(){
        _this.$nextTick(function(){_this.width="100%"})
    },0);
}
Saurabh Mistry
  • 12,833
  • 5
  • 50
  • 71
  • Can you explain why this requires being wrapped in a setTimeout? I've tried it with the duration set at 0 and it still works correctly, just not sure why it works that way instead of with the $nextTick standalone. – bdx Apr 29 '19 at 05:21
  • read more here : https://stackoverflow.com/questions/47634258/what-is-nexttick-or-what-does-it-do-in-vuejs – Saurabh Mistry Apr 29 '19 at 05:45