HarmonyOS 鸿蒙Next [bug] Lite Wearable for循环组件并动态绑定style animation-name属性translateY会发生漂移

HarmonyOS 鸿蒙Next [bug] Lite Wearable for循环组件并动态绑定style animation-name属性translateY会发生漂移

例如hml

<div
tid="id"
for="{{v in list}}"
class="bar"
style="animation-name: {{v.anime}};"
></div>

css

@keyframes test1 {
  from { transform: translateY(0); }
  to { transform: translateY(200px); }
}

@keyframes test2 {
  from { transform: translateY(0); }
  to { transform: translateY(300px); }
}

anime是动画名称，动态改变循环列表的值，动画元素会直接横坐标偏移


更多关于HarmonyOS 鸿蒙Next [bug] Lite Wearable for循环组件并动态绑定style animation-name属性translateY会发生漂移的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复
<stack class="stack">
translateX
</stack>

@keyframes test1 { from { transform: translateY(0); } to { transform: translateY(200px); } }

@keyframes test2 { from { transform: translateY(0); } to { transform: translateY(300px); } }

用类似的demo，真机可以正常运行，模拟器正常，真机无法运行的话，可以对比一下版本，升级一下真机版本

更多关于HarmonyOS 鸿蒙Next [bug] Lite Wearable for循环组件并动态绑定style animation-name属性translateY会发生漂移的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


@keyframes的from/to不支持动态绑定，具体文档参考：https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/arkui-js-lite/js-lite-components-common-animation.md

我是改变动画名称的，在模拟器上有效果，

link4.gif

放张图看看？

注意：由于提供的HTML内容中的<img>标签地址为空，因此在Markdown中未添加图片。

补了，正常`translateY`应该向下移动，位置飘了，使用`for`控制才会这样，不是`for`的元素正常改变动画名称是正常的，

我这边真机动态绑定直接失效。

哪个手表型号还有os版本，我是GT5，os 5，开发用的模拟器，

针对HarmonyOS鸿蒙Next中Lite Wearable设备上的for循环组件在动态绑定style animation-name属性为translateY时发生的漂移问题，可能的原因及解决方案如下：

该问题可能源于动画属性在循环组件中的异步更新或状态管理不当。在鸿蒙系统中，动态属性绑定和动画处理需要确保状态同步和动画帧的准确渲染。

  1. 检查动画帧同步：确保translateY动画的每一帧都正确同步到组件状态更新。检查动画触发条件和持续时间是否与组件状态更新周期一致。

  2. 避免状态冲突：在for循环中，每个组件的状态应该是独立的。检查是否有状态共享或冲突导致动画异常。

  3. 优化动画性能：对于大量组件的动画处理，考虑使用性能优化策略，如减少动画复杂度、使用更高效的数据结构和算法。

  4. 复查动画属性设置：确认animation-name属性绑定正确，且translateY动画的定义无误，包括起始值、结束值和动画曲线等。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部