Vue3中animation-iteration-count属性不生效问题咨询

Vue3的<Transition>组件默认的动画时长检测逻辑仅读取单轮动画的animation-duration属性值，不会自动叠加animation-iteration-count对应的倍数时长。你示例中进入动画单轮时长为0.5s，设置了3次迭代，总动画时长应为1.5s，但Vue在0.5s后就会自动移除.example-enter-active类，导致动画直接中断，表现为仅闪烁一次。

Vue3本身对animation-iteration-count没有特殊限制规则，该问题属于Transition组件自动时长检测机制的默认表现，不属于框架bug。

• 方案1（优先推荐）：主动为组件指定总动画时长
  通过duration属性明确告知Vue动画的总运行时长，单位为毫秒，可分别为进入、离开动画单独设置时长，修改示例如下：

<transition appear name="example" :duration="{ enter: 1500, leave: 500 }">
  <div v-if="show" class="a"></div>
</transition>

此处进入动画总时长设为1500ms（0.5s * 3），离开动画保持原500ms即可，该方案不受浏览器样式解析差异影响，稳定性最高。

• 方案2：将迭代次数合并写入animation简写属性
  部分场景下分开声明animation-iteration-count会导致Vue无法正确识别总时长，可把迭代次数直接写到动画简写规则中：

.example-enter-active {
  /* 规则顺序为：动画名 单轮时长 迭代次数 */
  animation: example 0.5s 3;
}

内容的提问来源于stack exchange，提问作者albertochigua