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

Posted 2023-02-22

【中文标题】在挂载 Vue 组件时触发 CSS 动画

【英文标题】：Triggering a CSS animation upon a Vue component being mounted

【发布时间】：2019-09-17 17:11:51

【问题描述】：

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

我已将更改放在已挂载回调中的 $nextTick 函数中，但它似乎在组件首次渲染之前立即应用，因此该项目出现在其最终状态，而无需播放动画即可到达该点。

问题的关键在这里：https://jsfiddle.net/j1oupq5e/1/

相关挂载功能如下（默认宽度从1px开始）：

mounted() 
  this.$nextTick(function()this.)

如何让动画在组件被挂载时开始播放？

【参考方案1】：

你可以调用 setTimeout 函数：

mounted() 
  let _this=this;
    setTimeout(function()
        _this.$nextTick(function()_this.)
    ,0);

【讨论】：

您能解释一下为什么这需要包含在 setTimeout 中吗？我已经尝试将持续时间设置为 0，它仍然可以正常工作，只是不确定为什么它会以这种方式工作，而不是单独使用 $nextTick。

在这里阅读更多：***.com/questions/47634258/…