在挂载 Vue 组件时触发 CSS 动画

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);
}