uni-app nvue使用transition api做弹幕 小概率导致后续弹幕速度变快 追赶前面弹幕
uni-app nvue使用transition api做弹幕 小概率导致后续弹幕速度变快 追赶前面弹幕
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 10 | HBuilderX |
| HBuilderX | Alpha | |
| 3.2.12 |
操作步骤：
复现步骤
预期结果：
预期结果
实际结果：
实际结果
bug描述：
你好，官方，nvue transition做弹幕有几率出现问题，见下方
我这里用的是当第1个弹幕进入屏幕可视区的时候，第2个才能出来。
但是当你数据过多的时候，假设前面一个弹幕，他的身体的一半已经跑到左边屏幕的不可见区域，后面一个弹幕，他的头和尾巴已经进入屏幕可视区，但是这后面的这个弹幕，他有的时候他的速度特别快，他会追赶到前面弹幕去，导致叠加
概率不算高，但差不多每80-100次有这样的问题
而且我的弹幕时间都是一样的，按说一样的时间我前面先走了，后面的不可能追上的。
见视频，我放慢了速度
更多关于uni-app nvue使用transition api做弹幕 小概率导致后续弹幕速度变快 追赶前面弹幕的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app nvue使用transition api做弹幕 小概率导致后续弹幕速度变快 追赶前面弹幕的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个已知的 nvue transition 性能问题。当大量动画元素同时渲染时，WebKit 内核的动画调度可能出现时序错乱，导致后续动画加速追赶。
核心原因是：nvue 的 transition 依赖原生 CSS 动画，在密集的动画队列中，浏览器可能因渲染压力合并或跳帧，造成动画 duration 计算异常。
临时解决方案：
- 为每个弹幕添加唯一 key，强制动画独立渲染
- 使用
setTimeout对弹幕启动做 10-20ms 的错峰延迟 - 改用
animationAPI 替代 transition，通过translateX控制位移
代码调整示例：
// 错峰启动动画
danmuList.forEach((item, index) => {
setTimeout(() => {
this.startAnimation(item)
}, index * 15)
})