在安装Vue组件时触发CSS动画

Question

我想在组件安装后立即触发动画运行。

我已将更改放入已挂载的回调中的$ nextTick函数内，但它似乎在组件首次呈现之前立即应用，因此该项目以其最终状态出现，而没有播放动画达到该点。 / p>

问题的小提琴在这里：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);
}