Запуск CSS-анимации при монтируемом компоненте Vue

Question

Я хочу, чтобы анимация запускалась сразу после монтирования компонента.

Я поместил изменение в функцию $ nextTick внутри смонтированного обратного вызова, но похоже, что оно применяется непосредственно перед первой визуализацией компонента, поэтому элемент появляется в своем конечном состоянии без воспроизведения анимации для достижения этой точки.

Суть проблемы здесь: https://jsfiddle.net/j1oupq5e/1/

Соответствующая смонтированная функция выглядит следующим образом (по умолчанию ширина начинается с 1px):

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

Как я могу заставить эту анимацию начать воспроизводиться после монтирования компонента?

Answer 1

Вы можете вызвать функцию setTimeout:

mounted() {
  let _this=this;
    setTimeout(function(){
        _this.$nextTick(function(){_this.width="100%"})
    },0);
}