共享元素转场中动画名称与效果的匹配问题？

Question

我在使用共享元素转场时，为元素设置了自定义的动画名称和效果，但是发现动画并没有按我设置的名称执行。请问动画名称和效果是如何匹配的？我该如何确保动画名称和效果正确对应？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

共享元素转场的动画名称和效果通常是通过属性或类名来匹配的。确保你设置的动画名称与鸿蒙系统识别的名称一致，并且动画效果已经被正确定义。

// 在元素上设置转场动画效果
<div transition-effect="custom-slide"></div>

// 在样式或动画定义中匹配这个名称
@keyframes custom-slide-in {
  /* 动画效果定义 */
}

.custom-slide-enter-active {
  animation: custom-slide-in 0.5s;
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。